Video Banner For Mobile/Desktop

Store Design
, ,
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;}
}