Mobile and Desktop videos appearing at the same time

  • Resolved cmkl

    (@cmkl)


    3 years, 6 months ago

    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

    (@eedee)

    @cmkl,

    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

    (@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.

    cmkl

    Plugin Contributor WordPress Slider

    (@wordpressslider)

    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

    (@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

    (@wordpressslider)

    @cmkl should be fixed in Gutenslider 5.

    Thread Starter cmkl

    (@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.

Tags