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

[marvic]

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!

[zaczee]

Hi,

Can you share your store url

[petitepaws]

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

[marvic]

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.