Removing Revolution Slider Image on Mobile but keeping it on desktop

MattTemper
Tourist
6 0 2

Hi,

Theme:  Wokiee 2.0.3.

Page:  products.usetemper.com

 

 I have an image heavy slider as my HERO that does not look good on mobile.  Is there anyway I can choose an alternative image or just a color as the background for mobile and keep the image on desktop/ipad.  The element I am using inside Wokiee is "revolution slider"

 

Thanks!

MattTemper
Tourist
6 0 2

update:  I used this snippet but it removed the entire block.  I want to keep the text and button but not the image.

 

@media only screen and (max-width: 766px) {

   #shopify-section-1530224149715 {

display: none;

}

}

0 Likes
dmwwebartisan
Shopify Partner
5841 1337 1714

@MattTemper 

Please add the following code at the bottom of your assets/theme.css file.

@media (max-width: 480px){
div#shopify-section-1530224149715 { display: none; }
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
MattTemper
Tourist
6 0 2

@dmwwebartisan is it possible to keep the text but remove the image OR swap the image for a solid background color and keep the text?

 

In a perfect world the desktop verison would show image + text and the mobile version would show text ONLY or text on solid background.  is that possible?

0 Likes
Natztech
Shopify Partner
646 177 433

@MattTemper   please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

 @media only screen and (max-width: 749px){
  #shopify-section-1530224149715 .nomargin .slider-revolution  .tp-banner  slotholder .tp-bgimg{
    background-image: url() !important;
    background: #e4d6c140 !important;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
MattTemper
Tourist
6 0 2

@Natztech I think you're close but its not working.  The image is just an img contained in the slider, not a background.  

when I added that snippet nothing changed on either desktop or mobile.  same display on both. 

0 Likes