Showing different slideshows on Desktop/Mobile (Dawn Theme)

Technical Q&A
1

Hi,

I’m working on a new front page Image Banner but I’m switching over to a Slideshow so we can have more variety.

The issue I’m encountering is that an image which works well on desktop is cropped to the point of being pointless on mobile, and images which work on mobile are far too large on desktop.

What I would like to do is have two slideshows, one which is catered to mobile (and is hidden on desktop) and vice versa with the desktop version hidden on mobile.

I’ve set up a basic version with both the slideshows in place on the site (https://www.atvsonly.co.uk/pages/test) while trying to follow this advice (https://community.shopify.com/c/shopify-design/dawn-theme-5-0-the-slideshow-looks-great-on-desktop-but-on/td-p/1598883) to hide each one when relevant, but no success.

I ended up with this-

@media screen and (min-width:750px){

shopify-section-template–16726291316991__35f58ec4-5f1f-40ba-9f65-17747001ec3a {display:none; visibility:hidden;}

}

@media screen and (max-width:749px){

shopify-section-template–16726291316991__ac6e2ea8-e2ee-4295-ba9e-72aa3616d354

{display:none; visibility:hidden;}

}

in the base.css, but that didn’t work (and has since been removed), the other advice was put it in custom CSS but that wouldn’t even save.

If anyone has any advice I’m all ears!
Thanks,
Iain

2

When you pasted that code in base.css, what happened?

3

Hi, It didn’t seem to do anything when pasted in the base.css

4

@IainatATVSOnly , to make sure I’m getting this right, you have two different slideshows, one for desktop, and one for mobile, which you want to hide based on the screen size, correct?

Try adding the display: “none” based on the screen size to the class .slider-mobile-gutter itself instead of #shopify-section-template.

Let me know if this works. Thanks.

5

Hi,
Sorry to be an idiot, but I don’t know what you mean by 'Try adding the display: “none” based on the screen size to the class .slider-mobile-gutter itself instead of #shopify-section-template.’

Could you expand a bit? Where does this need to go etc.

6

Hi,

Having gone over it, did you mean something like this;

@media screen and (min-width:750px){

shopify-section-template–16726291316991__35f58ec4-5f1f-40ba-9f65-17747001ec3a

{display: none!important;
}

}

@media screen and (max-width:749px){

shopify-section-template–16726291316991__ac6e2ea8-e2ee-4295-ba9e-72aa3616d354

{ display: none!important;
}

}

I’ve given that a try, and still no joy so I’m obviously missing something.

7

This would go in your CSS file targeting the slideshow, such as component-slider.css or component-slideshow.css.

Can you send me an email at zqdo.tech@gmail.com? I think this might be easier if I could see your file.

8

I think he meant it to look like this. But this will just hide both slideshows.

@media screen and (min-width:750px){

.slider-mobile-gutter {display:none; visibility:hidden;}

}

@media screen and (max-width:749px){

.slider-mobile-gutter {display:none; visibility:hidden;}

}