Archived topic

Hiding Background Image on Mobile

5 replies · Started by Ben on January 18, 2021

Viewing posts 1–6 of 6

January 18, 2021 at 8:53 am #1623845

Hey guys,

How do I remove background images on mobile?

I'd added the following the additional CSS panel:

@media (max-width: 768px) {
.gb-container.no-mobile-background {
background-image: none;
}
}

Then I've added the following class to the container:

no-mobile-background

However, the image still displays on mobile.

How would I hide it on mobile?

Thanks

January 18, 2021 at 9:41 am #1623913

Hi there,

try this CSS:

@media (max-width: 768px) {
    .gb-container.no-mobile-background,
    .gb-container.no-mobile-background:before {
        background-image: none;
    }
}

When the background is set as a Pseudo Element it moves it to the :before pseudo element - that CSS will cover both element types

April 7, 2021 at 1:53 pm #1725408

Hello,

I tried the code above but it doesn't seem to work.

I only have one background image set for the body, and I would like to disable it for mobile view.

Is there another code I can try?

Many thanks!

Mat

April 7, 2021 at 2:04 pm #1725418

Can you open a new topic for your question and link us to the page in question?

Thanks :)

April 7, 2021 at 2:30 pm #1725436

No problem!

April 7, 2021 at 2:42 pm #1725444

Thank you :)

This archived topic is closed to new replies.

Start building better websites today.