Toggle "Show container on Desktop/Mobile" has no effect - DAWN

marvic
Explorer
61 4 15

Hi there,

 

we're using a custom theme that is based on Shopify's Dawn Theme.

We want to display different page banners, depending on the device used (Desktop/Mobile).

The section in question is the "Image Banner", which comes with two toggles "Show container on Desktop" and "Show container on Mobile".  Selecting/deselecting doesn't have any effect!

For now we are using CSS and media screen size to control which banner shows on which device. This is not optimal as both image banners are fetched by the device. In order to increase page speed we would like the devices to only fetch the correct sized image. We believed the toggles would serve this purpose, but they don't.

If anyone could point me to a tutorial or has some advice? I guess it should be a rather quick implementation using "srcset" attribution. I would still need some help with this.

Thank you!

Replies 3 (3)

zaczee
Globetrotter
848 46 42

Hi,

 

Can you share your store url

petitepaws
Visitor
1 0 1

having the exact same issues. What's the point of these desktop/mobile settings? 

marvic
Explorer
61 4 15

You'll need to add custom CSS for each section:

@media screen and (max-width: 750px;){
.banner {display: none}}

 

vary min-width / max-width depending on mobile or desktop.