Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

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

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

Home Forums Support Background image not showing properly on mobile devices

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #547503
    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

    #547668
    Leo
    Staff
    Customer Support

    Hi there,

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

    Can you try disabling the caching plugin?

    #548225
    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

    #548479
    Leo
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.