Archived topic

Background images on Tablets and Smartphones

1 reply · Started by Richard on September 1, 2019

Viewing posts 1–2 of 2

September 1, 2019 at 7:59 am #998491

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.

September 1, 2019 at 9:20 am #998535

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 :)

This archived topic is closed to new replies.

Start building better websites today.