- This topic is empty.
-
AuthorPosts
-
May 24, 2017 at 3:46 pm #255169ruby76Participant
Hi all – I’m trying to set up two different sliders with a WordPress plugin, one of which should show on devices 768+ pixels wide, and the other for anything bigger than that. I set the header to show both, but define some show/hide CSS in two sections: @media screen and (max-width: 767px) vs. @media screen and (min-width: 768px).
This works well at hiding the larger slider as I resize my browser window below 768px (and vice versa), but I’m running into trouble on my phone, which for some reason shows both sliders (in Chrome and Firefox as well). I ran a check through viewportsizes.com to see what the actual viewport dimensions were for each, and it’s all plenty small enough – 412×615 in Chrome and 414×615 in Firefox. Does anyone know why the mobile browsers might be displaying both sliders?
Here’s a quick link to the relevant part of the code I’m using: https://codepen.io/ruby76/pen/bWZpNd
Site itself is here: http://onetrent.comThanks in advance for any advice!
May 25, 2017 at 5:18 am #255172AtelierbramParticipantI can’t reproduce this on desktop making it hard to debug. Only thing I can think of that there is some extra styling with javaScript inserted on the element when it detects this mobile device.
What you could try is adding the[style]
attribute selector to theid
in CSS, to fight this, like:#advps_container1[style] { display: none !important; visibility: hidden !important; } #advps_container5[style] { display: inline !important; visibility: visible !important; } @media screen and (min-width: 768px) { #advps_container1[style] { display: inline !important; visibility: visible !important; } #advps_container5[style] { display: none !important; visibility: hidden !important; } }
No need to include the
max-width
media-query definition I think …Very well formulated question BTW, it’s a shame I can’t come with a better answer ;)
May 25, 2017 at 11:14 am #255200ruby76ParticipantWhew…after a ton more trial and error here, trying the code you provided and then even removing the second (mobile-optimized) slideshow completely, I couldn’t even see the changes reflected in mobile browsers. I think there is some larger issue with caching or something, preventing me from being able to reliably view updates. I’ve set the slider to just be full-width on mobile for now, but will keep trying this out. Thanks so much for your response and advice!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.