Video Banner For Mobile/Desktop

Store Design
, ,

Topic summary

A user working with the Pipeline theme needs to display different video banners for mobile and desktop devices, as the current video appears too small on mobile.

Proposed Solutions:

  • One contributor suggested a video tutorial for implementing separate banners
  • Another recommended checking theme settings first, then using two separate sections with custom CSS to control visibility per device

Implementation Process:

  • The theme doesn’t natively support separate mobile/desktop video banners
  • User created two video banner sections on the homepage
  • A CSS solution was provided using media queries to hide the desktop section on mobile (max-width: 749px) and hide the mobile section on desktop (min-width: 750px)
  • The code targets specific section IDs and should be added to the theme.css file

Status: Solution provided but not yet confirmed as implemented or tested by the original poster.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I’m using the Pipeline theme.

How can I have a different banner on mobile and desktop?

On mobile the video is too small.

2

Hi @Mg71
Follow this tutorial for different banner on mobile and desktop.

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

3

@Mg71 please check if your theme provides different options for desktop and mobile banners. If no then you can use 2 different sections , one for mobile and 1 for desk and then using custom css you can show the section you want.

4

For the video banner, the theme doesn’t offer mobile and desktop. I’ve attached a photo for reference.

I’d prefer to use custom css to have mobile and desktop separate.

image.png
image.png423×919 71.5 KB

5

@Mg71 ok please add both sections with separate videos for desktop and mobile on home page, so we can check and set css

6

I added both sections.

Here’s a preview link: https://footnotes.com/?_cd=ec4c80d98064be63fa253c74ae4ab5e95744cc01b1063858764b53ecf643b365&_uid=107884577041&preview_theme_id=177776754961&preview_token=7j6meb8tczyhlqss1p2faclcebc0pynu.

7

@Mg71 which one do you want to keep for desk and which for mobile?

8

Can the first one be for desktop and second for mobile?

9

@Mg71 please add this css to the very end of your theme.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → theme.css

@media screen and (min-width:750px){
#shopify-section-template--24524984451345__section_video_VEpeVz{display:none; visibility:hidden;}
}

@media screen and (max-width:749px){
#shopify-section-template--24524984451345__section_video_7Cc7kT{display:none; visibility:hidden;}
}