PLEASE HELP - Hiding different background videos on mobile and desktop!

Store Design
1

Hi guys, my site goes live tomorrow and i need some quick help.

On desktop, I need to hide the bottom background video. On mobile, I need to hide the top background video. The end goal is to have a video that looks better for desktop and a video that looks better for mobile.

preview: https://nspz54qp6mbnjuur-58925383888.shopifypreview.com
theme: icon

I’ve been trying to figure out the CSS to hide this but need some extra help if anyone can. Thank you so much in advance :slightly_smiling_face:

1 Like
2

@abbyp

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/stylesheet.css ->paste below code at the bottom of the file.
@media screen and (max-width: 980px) {
div#shopify-section-template--15899939143888__1657203772ff3bbaa3 {
    display: none;
}
}
1 Like
3

YOU ARE AMAZING. thank you so much!!! the only issue im having now, however, is that my video is blown up very very large on mobile, when i would like the three girls to show (like on desktop.) Do you know a quick code fix to contain the video so that it displays how it does on desktop (it’s ok if its small) :slightly_smiling_face:

https://nspz54qp6mbnjuur-58925383888.shopifypreview.com

4

@abbyp

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?