Optimize website for desktop and mobile view

I have this website: northernazaerialphotography.com that I'm trying to optimize both for mobile and desktop. The desktop looks fine, but when the website is loaded in a mobile screen size, e.g. 322x824, the title is too large and outside of the title box, the footer box contents are spilling over and the site doesn't generally have the same look as the desktop view. I'm a complete beginner to Grav, so any suggestions on ways to optimize for mobile?
Thanks,

Regarding the footer: Antimatter uses a fixed size header and your content is too long which is caused by your upsized icons.

Add this to your custom.css to fix this

#footer {
    height: 8rem;
}

The Problem with your Headline is similar, but a bit less easy to fix.

1. You overwrite base.html in a child template and put a logo graphic in https://github.com/getgrav/grav-theme-antimatter/blob/develop/templates/partials/base.html.twig#L46
2. You add Media Queries to your custom.css which set header font size smaller on smaller screens or cut it off with text-overflow:ellipsis;

hi @kk6axq

In addition to @chris_jung comment, i use in some projects some jquery library Flowtype or fittext

You come to this mantigames link here: https://github.com/getgrav/grav-theme-antimatter/blob/develop/templates/partials/base.html.twig#L46
Good luck to you.