Impulse Theme: Hiding Video on Mobile or Desktop

[WesQ]

Hi,

I have a hero video section on a page I am testing out. I have a specific sized video for Desktop and another one for Mobile. I want to hide Mobile on Desktop and Desktop on Mobile. I've followed numerous guides on here but none have seemed to work.

The page I am experimenting with is: https://bionicgym.com/pages/hero-test-10-5-24

I have added the following code to theme.css.liquid but it has not worked. What am I missing?:

*TO HIDE DESKTOP VIDEO ON MOBILE*
@media only screen and (min-width: 700px) {
#Mp4Video-template--16826877411520__hero_video_xigWc3 {
display: none;
}

[PageFly-Amelia]

Hello @WesQ 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You change the code I have provided to help you solve the problem you are facing

*TO HIDE DESKTOP VIDEO ON MOBILE*
@media only screen and (max-width: 700px) {
#Mp4Video-template--16826877411520__hero_video_xigWc3 {
display: none;
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[HDL-Shin]

Hi @WesQ ,

I see your code is missing closing braces 
You can try this code : 

*TO HIDE DESKTOP VIDEO ON MOBILE*
@media only screen and (min-width: 700px) {
 #Mp4Video-template--16826877411520__hero_video_xigWc3 {
  display: none;
 }
}

Hope it can help you
Kind Regard, 
HDL-Shin

[Raj-webdesigner · Accepted solution]

Add This Code In youe edit code > theme.css File

@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;
    }
}

[WesQ]

Thanks Raj and everyone for all your suggestions. This code works perfectly.

[WesQ]

Hi @Raj-webdesigner, Thanks again for your help with this. I still have the code in place but now that I am trying to publish these videos on a new page, the code your supplied does not work. Do I need to alter it in anyway?

The page I'm working on to publish live is: https://bionicgym.com/pages/a10052024

[Raj-webdesigner]

Hello @WesQ

My code works only on home page because code class name is index that's why my code doesn't work on other page

But you tell me by adding that section, I give it new css. 

[Raj-webdesigner]

Add This Code This Code Is Use All Section


Cange old Code And Put This Code on this Place

@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;
    }
}

[WesQ]

Perfect! Thanks again for your help Raj!

[WesQ]

Hi @Raj-webdesigner,

Is there a way that a static background image can load within the hero video section while the user waits for the Hero video to load. I have been doing some tests and it is a little slow to load.