[Support request] Background image not showing properly on mobile devices

[Ankit]

Hi
If you look at the homepage of the url, the image and text looks fine on desktop, but on mobile they are all over the place can you please help me in fixing this.

Thanks again

Ankit Yadav

[Leo]

Hi there,

Your site is not loading correctly to me: http://www.screencast.com/t/RYsq5zpdAUo

Can you try disabling the caching plugin?

[Ankit]

Hey Leo thanks for your reply, i have checked at the site is absolutely fine. Maybe try in a different browser.

Thanks

Ankit Yadav

[Leo]

Now it’s fine. It was definitely the caching before and not my browser problem 🙂

First I would recommend building that section with our page header add-on as it’s built for that:
https://docs.generatepress.com/article/page-header-overview/

Background images aren’t responsive by nature unfortunately.

In your case it’s probably best to switch out the image specifically for mobile. If you decide to stick with Sections, then this is the CSS:

@media (max-width: 768px) {
    .home #generate-section-1.generate-sections-container {
        background-image: url(https://MOBILE-IMAGE-URL-HERE);
    }
}

Let me know if you decide to use page header add-on as it will be different code.

As for the font, you can adjust in Customizer > Typography > Headings > H1 with mobile toggle on.

[Author]

Posts