Archived topic

Background image not showing properly on mobile devices

3 replies · Started by Ankit on April 11, 2018

Viewing posts 1–4 of 4

April 11, 2018 at 9:13 am #547503

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

April 11, 2018 at 11:39 am #547668

Hi there,

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

Can you try disabling the caching plugin?

April 12, 2018 at 5:11 am #548225

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

Thanks

Ankit Yadav

April 12, 2018 at 8:09 am #548479

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.

This archived topic is closed to new replies.

Start building better websites today.