Hide video on Desktop

[WesQ]

Hi again,

I am trying to keep the top video viewable on Desktop and the bottom video hidden.

On mobile I want the bottom video viewable only (this is currently the case because of the code provided to me)

I seemed to have this issue solved on a test page I was using thanks to some excellent code give to me here. Unfortunately the code must have been specific to that page because now I have a video displaying on another page I am trying to hide.

The page can be found here: https://bionicgym.com/pages/a10052024

That code I have placed in my theme.css is

@media screen and (max-width:767px){    
    main#MainContent .shopify-section.index-section--hero:first-child {
        display: none;
    }
}
@media screen and (min-width:768px){    
      main#MainContent .shopify-section.index-section--hero:last-child {
        display: none;
    }
}

Thank you!

[HDL-Shin · Accepted solution]

Hi @WesQ , Let's try again with this code : 

@media screen and (max-width:767px){    
    main#MainContent .shopify-section.index-section--hero:first-child {
        display: none;
    }
}
@media screen and (min-width:768px){    
      main#MainContent .shopify-section.index-section--hero:nth-child(2) {
        display: none;
    }
}

Hope this can help you 
Kind regards, 
HDL-Shin

[PageFly-Henry]

Hi @WesQ 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

div#shopify-section-template--16827474804928__hero_video_WhKfGw {

    display: none;

}

@media (max-width: 767px){

div#shopify-section-template--16827474804928__hero_video_WhKfGw {

    display: block !important;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly