Hide background image in section for mobile devices

[gizzie]

Hope you can help me with a problem. How can I hide a background image of all sections for small screen devices? I would only like to show the background color and content.

The following code is not working.

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

You can view the view the website @ www.chielbos.info

[ruenel]

Hello @gizzie,

Thanks for writing in! As it turns out, you are using a classic section. Please update your code and use this instead:

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

We would love to know if this has worked for you. Thank you.

[gizzie]

Hi,

This fixed it, great. However I have a red background now which I can’t trace to disable. Can you push me into the right direction?

[Prasant]

Hello @gizzie,

Thanks for updating the thread.

I checked the website and looks like the Red background color is coming from the section inline code itself. If you have added any inline CSS in classic section, please remove background-color: rgb(237, 29, 35); from the code and that should fix the issue.

You can also update previous code shared by my colleague with following:

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

Thanks.

[gizzie]

You guys simple rock. Big time! Still have some small issues with this change

1. When rotating the screen to landscape, the image appears. What change is required to disable the bg for this orientation?
2. How can I remove the space between the different sections (i.e. there is no space in my desktop version, but there is on the mobile version)?

[friech]

Hi @gizzie,

1. That is because when you rotate the screen, the screen size increase become more than 480px, to resolve that on the custom CSS above, please adjust the @media (max-width: 480px) to 767px

2. Those space are your empty Columns, please hide those empty Columns on small (SM) and extra small (XS) devices using the Hide During Breakpoints feature.

Hope it helps,
Cheers!

[gizzie]

Ad1. Thanks.
Ad2. I don’t see this option in Cornerstone? Is this because of the classic elements I am using or should I enable something in Cornerstone for the options to appear?

[rad]

Hi @gizzie,

That’s present even on classic columns, would you mind providing a screenshot of what you’re getting when inspecting a column?

Thanks!

[gizzie]

When I select the screen size the whole block is removed, instead of the space between each section.

[lely]

Hi @gizzie,

Yes, those option doesn’t exist on classic column. Please try to add this class instead x-hide-xs on the column class field to hide it on small devices instead:

Hope this helps.