Removing hero image on mobile

[wbc]

Hi, Ive got a hero section which has an image that I want to remove on mobile layouts. I dont want to hide the section on mobile per this post Remove header image on mobile because that will mean there will be multiple h1 tags on the page which is bad news for SEO.

Ive set the section class to .herosection and have added the following page CSS but the background image isnt resetting. Can you tell me what I need to add to remove the image please on mobile

@media screen and (max-width:979px) {
.herosection {
background-image : none! important;
}
}

Thanks

[marc_a]

Hi @wbc,

Thanks for reaching out!

The code is correct but we’re not quite sure why it is not working on your end, would you mind sharing the page URL so that we can take a look? Please keep in mind that we don’t provide custom CSS because it is outside the scope of our theme support. We will just give you some guidance on how you can achieve it.

Cheers!

[wbc]

Sent as a secure note so Google doesnt see it

[tristup]

Hi @wbc,

It seems that the herosection class is not assigned to any of the sections of the page you referred to. Even if you have that class, you need to modify the code as follows to remove the Hero Image.

.herosection .x-bg .x-bg-layer-upper-image,
.herosection .x-bg .x-bg-layer-lower-image
{
    background-image: none !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

NOTE: I found that .mysection class has been assigned to the section, you need to change the herosection to mysection in the above code to get it work.

Thanks

[wbc]

That extra code worked perfectly. Thanks very much.

[tristup]

Hi @wbc,

Glad that we are able to help you.

Thanks