Make slideshow only show on desktops? (large screens)

Highlighted
Tourist
15 0 2

Hi, just wondering if anyone knows how to make a slide show only show on desktops, and disabled/hidden on smaller screens (moble/tablets)? Thank you!

Using the free venture theme.

0 Likes

Hi Aaron,

You can definitely do so. I am not very familiar with venture theme but I think it probably has a setting under theme customization for that. If that is insufficient you can also accomplish the task with CSS.

@media screen and (min-width: 480px) {
    slideshow {
        display: none;
    }
}

Something like this

 

Best regards

Tonny

Shopify PageSpeed Expert | Speed up your Shop and Earn 45% more, Get 31% more Traffic and Boost Conversion Rates by 20%
0 Likes
Shopify Partner
1 0 0

Easier than that, even. (Though there may be other problems with my solution.)

Open index.liquid and locate the div containing your slideshow (should be "hero-wrapper", right near the top.)

Wrap that whole div like so:

<div class="small--hide">
  <div class="hero-wrapper">
    [lots of code]
  </div>
</div>

... and there you go!

- JF Stackhouse - Digital Marketing Manager -LinkedIn: https://www.linkedin.com/in/jfstackhouse - Resume: https://goo.gl/4CEv0z
0 Likes