[Support request] Background images on Tablets and Smartphones

[Richard]

I am using Sections to setup my static homepage image and welcome text and it looks great on my PC but the images are cutoff when I view the homepage on a tablet or smartphone. It is cutoff so much that I know it will cause visitors to bounce immediately from my site if not on a PC.

[Leo]

Hi there,

Background images aren’t responsive by default – it’s not a theme thing.

You can either consider changing the position for mobile:

@media (max-width: 768px) {
    #generate-section-1.generate-sections-container {
        background-position: center;
    }
}

Or use a specific image for mobile:

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Author]

Posts