sticky menu

Hi Tom,

unfortunatly not.
It seems to be a bug. I've added a mobile version of the picture with 768px which is taken if I reduce the browser window size. But the image is not getting smaller.
But, same like the issue with the sticky menu, if I remove the text overlaying the image, then the image reduces the size correctly...

Having content/text inside the area will expand the height, and the background image wants to cover the entire area. As the height increases, the background image has to adjust to fill the vertical space, which also means increasing the width so it keeps the same aspect ratio and doesn't get squished. Background images can really be a pain on mobile.

You need to have an idea of the width and height of the content area on mobile, and then adjust the mobile image for that size exactly.

I would take a better look, but you're site is hidden again ;)

Sorry Tom, is open again.

Can I specify that I want to have content/text in not mobile version and disable the overlaying text in mobile mode?

You would have to wrap your content in a div with a class like this:

<div class="hide-on-mobile">
      Stuff to hide on mobile in here
</div>

Then add this CSS:

@media (max-width:768px) {
      .hide-on-mobile {
            display: none;
      }
}

ahhhh, this is nice.
Slowly I get an idea how it works.

Thanks Tom!

You're welcome! :)