Home>Support>Change image background for mobile device with Media Query

Change image background for mobile device with Media Query

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.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 months, 27 days ago Andrew Misplon Hi, I Work Here

    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: red

    The 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?

  2. 6 months, 27 days ago Andrew Misplon Hi, I Work Here

    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.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More