Re: Impulse Theme: Hiding Video on Mobile or Desktop

Solved

Impulse Theme: Hiding Video on Mobile or Desktop

WesQ
Excursionist
26 1 1

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;
}
Accepted Solution (1)

Raj-webdesigner
Shopify Partner
316 73 74

This is an 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;
    }
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 9 (9)

PageFly-Amelia
Shopify Partner
493 154 222

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

HDL-Shin
Shopify Partner
80 20 15

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️

Raj-webdesigner
Shopify Partner
316 73 74

This is an 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;
    }
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


WesQ
Excursionist
26 1 1

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

WesQ
Excursionist
26 1 1

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
Shopify Partner
316 73 74

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. 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


Raj-webdesigner
Shopify Partner
316 73 74

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



If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


WesQ
Excursionist
26 1 1

Perfect! Thanks again for your help Raj!

WesQ
Excursionist
26 1 1

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.