I converted my site from X to PRO. In X I am able to hide section background image on mobile with:
@media (max-width: 480px){
.x-section.bg-image {
background-image: none !important;
}
}
But it is not working in PRO for new sections. It does work on the legacy sections.
I tried
@media (max-width: 480px){
.x-section.x-bg {
background-image: none !important;
}
}
This doesn’t work either.
Can you tell me what I’m doing wrong?
Hi @joann7,
Thanks for writing to us.
The HTML structure for Pro is a little different than the X theme. You just need to add two different child classes to it.
First one .x-bg-layer-lower-image if you are adding the background image to Lower Layer and
the second one is .x-bg-layer-upper-image if you are adding the background image to the Upper Layer.
You can add the following code to the specific element CSS section.
@media (max-width: 480px) {
$el .x-bg .x-bg-layer-lower-image, $el .x-bg .x-bg-layer-upper-image {
background-image: none !important;
}
}
Remember that the above code will work if copied as it is and don’t conflict with any existing code.
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 do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.
Thanks
Got it! Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.