Hello,
I’m using https://siteorigin.com/theme/corp/.
I have a background image on the home page, located inside the SiteOrigin Hero widget.
The image is located in the Design section, in “Background Image” with its url and “Background Image Display” fields, with the “Cover” property.
My intention is to modify the image when viewed on a mobile device, changing it to a different image.
To do this, I have performed several actions, but none of them has given me results.
Action 1: I modify the Mobile CSS Declarations field, inside the SiteOrigin Hero widget, in the Widget Styles section. Description of what I have introduced in the Mobile CSS Declarations field:
@media (max-width: 580px) {
div.sow-slider-image-overlay.sow-slider-image-cover
{ background-image: url(https://test.svenhassel.com/wp-content/uploads/2021/04/FondoPhonePgSH4.png);opacity: 0 !important; }
}
Action 2: Write a media query in SiteOrigin CSS:
@media screen and (max-width: 580px) {
#mk-page-id-69 div.sow-slider-image-overlay.sow-slider-image-cover
{ background-image: url(https://test.svenhassel.com/wp-content/uploads/2021/04/FondoPhonePgSH4.png);opacity: 0 !important; }
}
The web is under development.
Thanks in advance.
Best regards.
Hi Ferran
Thanks for reaching out :)
I’ve written a blog post that you might find helpful on the various CSS fields in Page Builder Post: A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes.
A declaration is made up of a property and a value, for example,
color: redThe following is a CSS media query wrapping a CSS rule:
@media (max-width: 580px) { div.sow-slider-image-overlay.sow-slider-image-cover { background-image: url(https://test.svenhassel.com/wp-content/uploads/2021/04/FondoPhonePgSH4.png);opacity: 0 !important; } }The CSS declaration fields can only support declarations, one per line. A property followed by a value.
Perhaps give my blog post a quick read and see if that sets you up a little better to complete this task?
A little background I forgot to include. Within our premium support scope, we can offer in-depth assistance for changes like this one. Our free support covers basic usage and troubleshooting. For custom tasks within our free support scope, we can offer high-level advice but can’t go much further than that due to resource limitations.