Mobile options for background pictures

Support
#1

My site I am building looks like crap on the mobile http://93m.13c.myftpupload.com/employers/.
Mostly because the background picture makes it look like abstract art. How can I remove the picture for mobile or add a solid color in its place?

Thanks

#2

HI there,

You can use a custom CSS for that. It should be like this:

@media (max-width: 480px) {
    .x-section {
        background-image: none !important;
        background-color: #efefef;
    }
}

Hope this helps.

#3

This code only affects the bottom container. I wanted that one to stay as is and the top container to be a solid color.

#4

Hi there,

Please update the code to:

@media (max-width: 480px) {
    .x-section.bg-image {
        background-image: none !important;
        background-color: #efefef;
    }
}
#5

That doesn’t seem to do anything different. I tried deleting the code and then adding this and it still just affects the background of the bottom container. Again I am trying to elimate the background of the top container. It is a classic element.

#6

Hi there,

Is it for the employees section? That is a v2 section and the code previously provided will only work for Classic Sections.

To make this work for v2 sections, like the employee section, you can use this code:

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

The code above will remove the background image set on the lower layer of the section and the background color should show up instead.

Hope this helps.

#7

That worked. Thanks!

#8

You’re welcome.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.