Archived topic

Issue with background image on mobile

1 reply · Started by Ben on January 27, 2021

Viewing posts 1–2 of 2

January 27, 2021 at 6:30 am #1635506

Hey guy's,

I having trouble with the background image on mobile display, it looks way too big.

This is what it looks like on desktop:

Tablet:

And Mobile:

As you can see, the image is way too big and the text overlaps it.

So how can I make that image smaller on mobile display? Increasing the padding makes the image bigger and reducing it means it gets overlapped by more text.

Can you help?

Thanks

January 27, 2021 at 7:25 am #1635756

Hi there,

if you have GB Pro then you can use the Advanced backgrounds option to set different background parameters for the various device sizes. Without Pro, you would need to use some CSS:

@media(max-width: 768px) {
   .gb-container.mobile-background-reduce:before {
       background-size: 200%;
    } 
}

Adjust the 200% accordingly.

Then give the Container with the background an Advanced > Additional CSS Classs of: mobile-background-reduce

Would you mind in the future raising any GB specific requests within the GenerateBlocks support forum, it makes it easier for us to maintain and for other users to find the answer.

This archived topic is closed to new replies.

Start building better websites today.