Impulse Theme: Hiding Video on Mobile or Desktop

Store Design

Topic summary

A user needed to display different hero videos for desktop and mobile viewports on their Bionicgym.com site using the Impulse theme, hiding each version on the opposite device.

Initial Problem:

  • CSS code attempts weren’t working despite following multiple guides
  • The code had syntax errors including missing closing braces

Solution Provided:
Multiple contributors offered CSS media query solutions. The working code from Raj-webdesigner uses:

  • @media screen and (max-width:767px) to hide desktop video on mobile
  • @media screen and (min-width:768px) to hide mobile video on desktop
  • Targets specific Shopify section classes

Follow-up Issues:

  1. Page-specific targeting: Initial code only worked on homepage due to index-specific class names. Updated to use :nth-child() selectors for broader application across multiple pages.
  2. Loading optimization: User asked about adding a static background image while the hero video loads, as current implementation causes slight delays during testing. This question remains unanswered.

Status: Core hiding functionality resolved; loading performance optimization still open for discussion.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
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;
}
2

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

3

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

4

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

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

6

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

7

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.

8

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;
    }
}
1 Like
9

Perfect! Thanks again for your help Raj!

10

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.