Hide video on Desktop

Store Design
1

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!

2

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

1 Like
3

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