Remove section background image on mobile

[jasonixr]

I’m trying to remove the lower background image for a specific section on mobile.

This thread from June '18 covers a very similar question. However the provided CSSC is not working for me regardless of if it’s added to the page CSS editor or the section element css editor.

How should I update the following CSS so it removes the background on mobile for just a specific section? When I insert it into the element CSS field doesn’t have an effect and adding $el doesn’t seem to work:

@media (max-width: 480px){
.no-bg-img .x-bg-layer-lower-image {
background-image: none !important;
}
}

[Prasant]

Hello Jason,

Thanks for reaching out.

Code should work fine, provided you have added the CSS class name in section or column. Please do following:

1. Under Section > Column > Customize > Setup > Class add a class name.
   
2. Then add the above CSS that you have shared under X/Pro > Theme Options > CSS.
3. Please note that if you have used Background upper layer option, then please make sure to replace the Class Name with .x-bg-layer-upper-image. So the updated code would look like:

Background Upper Layer:

@media (max-width: 480px){
.class-name .x-bg-layer-upper-image {
background-image: none !important; 
}
}

Background Lower Layer:

@media (max-width: 480px){
.class-name .x-bg-layer-lower-image {
background-image: none !important; 
}
}

Please change custom class name class-name as per requirement.

Thanks.

[jasonixr]

Excellent, that did the trick. Thanks!

[nabeel]

Glad we could help.

Cheers!