Removing Revolution Slider Image on Mobile but keeping it on desktop

Store Design
1

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!

1 Like
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;

}

}

3

@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!

4

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

5

@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;
}
}
6

@Kinjaldavra 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.