Unable to change a background image for a Section using media query

[janakvakharia]

Hi

I have a section on a page for which I have given a class as follows:

For this section, I have specified a Background lower image.

For mobile devices, I wrote a media query to change the image as follows:

@media(max-width:480px) {
.gc-hdr-section .x-bg-layer-lower-image {
background-image:url(https://zhm.rxj.mybluehostin.me/wpcontent/uploads/2021/06/MicrosoftTeams-image-11.png);
}
}

Placed it in Theme Options -> CSS and tried both Page and Global.

However it doesn’t seem to change the image.

Could you advise what I am doing wrong?

thanks

Janak

[prakash_s]

Hello Janak,

Thanks for writing to us.

I checked your custom CSS code, you need to replace your code with the given code.

@media(max-width:480px) {
.gc-hdr-section .x-bg-layer-lower-image {
background-image:url(https://zhm.rxj.mybluehostin.me/wpcontent/uploads/2021/06/MicrosoftTeams-image-11.png);
}
} 

Replace it with this code.

@media(max-width:480px) {
.gc-hdr-section .x-bg-layer-lower-image {
background-image:url(https://zhm.rxj.mybluehostin.me/wpcontent/uploads/2021/06/MicrosoftTeams-image-11.png) !important;
}
}

I also noticed that your given image URL is not working. Please make sure the background image URL that you are adding is accesibale.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[janakvakharia]

Thanks a ton Prakash. Worked.

Been against it timewise and completely missed my attention.

Thanks again.

[marc_a]

Hi Janak,

We’re glad that my colleague @prakash_s able to help you with issue! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.