This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Change image background for mobile device with Media Query

Open 2 replies customizationthemetheme-corp
Ferran Rivas
4 years ago · Last reply by Andrew Misplon 4 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

2
  1. Andrew Misplon Staff 4 years, 9 months ago

    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. Andrew Misplon Staff 4 years, 9 months ago

    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.

Have a different question or issue?

Start New Thread