How to hide a specific div class on mobile?

Solved
Highlighted
Explorer
167 2 8

Hi,

I'm trying to create two different sliders, one for mobile and one for desktop. The first step in this is to hide the desktop version on mobile. The class name of my slider is: "shopify-section slider-section" and I'm trying to hide this div by using this css in my theme.css code:

 
@media (max-width: 750px){
  #shopify-section .slider-section {
    display: none;
visibility: hidden;
  }
}
 
However this does not work, does anyone know the correct way to achieve this?

Tanks

 

0 Likes
Highlighted

This is an accepted solution.

Hello ,

Replace that css with:

@media only screen and(max-width:768px){
.slider-section {
    display: none!important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes