Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Device Size-Dependent Show/Hide Element

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #255169
    ruby76
    Participant

    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.com

    Thanks in advance for any advice!

    #255172
    Atelierbram
    Participant

    I 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 the id 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 ;)

    #255200
    ruby76
    Participant

    Whew…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!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.