Not responsive header

Same problem here. On mobile devices the header (own made) isnt responsive. My website on my iphone fills only 75% of the screen, and leave a empty solid at the right.
I added @media responsive codes the the style.css, but no result.
I noticed that if you use for example firefox, en make your firefox window as small as an mobile screen, the header stops being responsive till 320 pixels, en then you have the same result as how you see it on your phone.
More people with the same problem?

thanks in advance!

Don’t suppose anyone figured out the solution to this? Same issue here, header image only displays maybe….20% of the middle of my image on my phone.

Yes, I am having this exact same problem.

I switched the vale of “background-size: contain” to “background-size: 100%” and that helps, but it creates large borders or banners over the header image.

I also tried “background-size: 100% 100%” but that stretches the background image and distorts it too much.

I’ve tried using the @media tag, but so far, can’t figure out where to place it to make it work.

Please help!

Modified Snaps source files at:
https://mikerylander.com