[Resolved] Fluid image on mobile

[federico alessandro galli]

Hi everyone,
sorry for my english 🙂

I’ve a problem when I use a page image header, and set on fluid… it works really good on web-site, but not working on mobile…is static and don’t have the parallax effect..

Thanks for any idea to solve it!

GP is amasing I’m using all add-ons and is magic

[federico alessandro galli]

I forgot to check Notify me of follow-up replies via email… so i comment again.. 😛

[Tom]

Hi there,

Usually the parallax effect isn’t desired on mobile – a little too flashy for such a small screen.

Depending on the aspect ratio of the image, it can look a little off on mobile because the aspect ratio of the header area changes as you reduce the size of the window.

You can try changing the background-size attribute on mobile, and see if you can find an value you like:

@media (max-width: 768px) {
      .generate-content-header {
            background-size: 100% auto;
      }
}

You can find more values you can try out here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Hope this helps 🙂

[Author]

Posts