Hide background image on mobile

Develop, Build & Integrate CMS Development
1

Hi,

I am trying to change the background image on the following site into just plain color on mobile device: https://www.vitalsmarts.dk/sund-high-performance

I saw someone had succed adding the following css to the Head HTML under advance settings on the page, however it does not work for us.

<style>
 @media (max-width: 479px) {
 .marquee {
 background: #0C2E4E !important;
 }
 }
</style>

Does anyone have an idea on how I can fix this?

Thank you!

2

@Camilla_02 Change .marquee to .dnd_area_main_banner-row-0-background-image as that’s the class that the background is being set on. Since it’s Drag and Drop that class is dynamically generated so just keep in mind if you ever place something above that section the class will change (though since it’s your hero I can’t imagine you’d ever end up doing that, but wanted to point it out just in case).

3

Hi @alyssamwilie :slightly_smiling_face:

I agree with your observation.

Regards,

Rafael López

4

Hi @Camilla_02 :slightly_smiling_face:

I can’t test it, but I think that you need something like this:

<style>
 @media (max-width: 479px) {
 .dnd_area_main_banner-row-0-background-image {
 background: #0C2E4E;
 background-image: none;
 }
 }
</style>

I hope this code solve your problem. I’ll wait for your response.

Regards,

Rafael López.

5

Thank you @alyssamwilie and @rlopez it works! I really am no expert in CSS and have been struggeling with this for hours, I truly appreciate your help!

6

Hello @Camilla_02.

It was a pleasure :slightly_smiling_face:

Regards,

Rafael López