Support » Plugin: WordPress Slider Block Gutenslider » Mobile and Desktop videos appearing at the same time

  • Resolved cmkl


    Hi there,

    I have a site I am building for a client. They have a video they want in a slider.

    Only they have one version for tablet and desktop and a different version for mobile.

    I have placed two Gutenslider blocks on my home page and added the mobile video as a slide for one slider, and the desktop/tablet video for the other slider. I have configured the mobile slider to only show on mobile and the tablet+desktop slider to only show on tablet and desktop.

    However in some tablet settings (iPad vertical for example) I am seeing both videos showing up on the front page.

    I can write the media queries to display: none the mobile video where necessary, but I am hoping you can point me in the right direction. Or simplify things.

    Where can I see the media queries Gutenslider uses to determine mobile-tablet-desktop breakpoints?

    Based on these, can you tell me which media query/queries I should override to make sure that there’s no ‘overlap’ that results in both videos showing?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author eedee



    there seems to be a bug in our media queries probably. Can you point us to the site you need help with?

    We are using:

    @media only screen and (max-width: 600px) { ... }
    @media only screen and (min-width: 600px) and (max-width: 960px) { ... } 

    It seems that should be 601 in one of the queries. Can you confirm it happens on 600px wide devices?

    Thread Starter cmkl


    Regrettably, the site is behind httpd auth right now as it’s in development. I can give you the credentials if there’s a way to send them privately.

    But yes, it seems like the problem viewport widths are in the 600px range. I was first able to reproduce the problem using the ‘iPad vertical’ setting in Chrome’s dev tools, which Chrome tells me is 724 x 1024. Don’t know if that’s device pixels or viewport. Similarly, Chrome’s “Surface Duo” landscape setting (720 x 540) shows the problem, whereas its vertical setting shows only the mobile video.

    I put this query in my child theme’s style.css to hide the mobile video on midrange tablets:

    @media screen 
      and (max-width: 1024px) 
      and (min-width: 600px) 
    div.included-mobile-slider {display: none !important}

    …and that seems to do the trick, but it would be better if the Gutenslider UI worked as expected.


    Plugin Contributor WordPress Slider


    is that .included-mobile-slider class coming from you? Because maybe you have other plugins / theme installed that messes with the gutenslider’s css?

    Thread Starter cmkl


    It is. I assigned that class to the mobile-only Gutenslider block in the block editor for that page so that I would have something in my child theme’s style.css that would be unique and allow me to override declarations as necessary.

    Plugin Contributor WordPress Slider


    @cmkl should be fixed in Gutenslider 5.

    Thread Starter cmkl


    This is awesome. Thank you so much.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Mobile and Desktop videos appearing at the same time’ is closed to new replies.