How can I hide specific image banners on mobile or desktop views?

[NataliaWu]

Hi there,

I am currently working on a page of my website ( i use dawn theme). I created two images of a same chart for desktop and mobile because the desktop image is too wide for mobile. Then I added both images as image banner sections on the page. Now I want to hide the desktop image banner from the mobile end, and hide the mobile banner from the desktop end. What should I do?

[Abdosamer]

Hi @NataliaWu , can you share screenshots of what you want to achieve exactly?

[NataliaWu]

Hi @Abdosamer,

Thanks for the reply. It is like the screenshot below. These two charts are designed for desktop and mobile separately, but it is actually the chart with same info. So I want to hide the desktop chart from the mobile end. And hide the mobile chart from desktop end.

 

[Abdosamer]

@NataliaWu , Can you please share your store url ?

[Abdosamer]

@NataliaWu , one great solution for you would be to wrap the two images inside the html <picture> tag, and use the media attribute to control when you want the images to appear based on screen size, for example:

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

 The first image will only appear on a screens larger that 600px , the other will appear on screens lesser than 600px.

[NataliaWu]

@Abdosamer, I am afraid I cannot share the store url with you. Sorry for that. 

Thanks for helping me. For the solution you provide, do i add the code directly in the CSS custom of the section?

[NataliaWu]

@Abdosamer And can you please elaborate more on wrapping two images inside the html <picture> tag? I am beginner level so... Thanks

[Abdosamer]

@NataliaWu , you have two images, each has its own url: 

<picture>
  <source srcset="url here" media="(min-width: 600px)" />
  <img src="url here" alt="MDN" />
</picture>

put the urls inside the picture element , the first one will appear only if the screen is larger than 600px, I hope this was clear. 

[Moeed]

Hey @NataliaWu 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Dan-From-Ryviu · Accepted solution]

Add this code Custom CSS of Image banner section that you want to hide on mobile

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

And this to section you want to hide on desktop

@media (min-width: 767px) {
  .banner {
    display: none;
  }
}

[NataliaWu]

OMG this works and it is really straightforward for a beginner like me. Thank you so much! @Dan-From-Ryviu 

[MattB07]

The best, simplest answer. Thank you

[Dan-From-Ryviu]

Happy I could help😘

[avaskye]

Hi, this code is super, super helpful, but for some reason, the image completely disappears on iPad Air! Would you happen to know why this is happening? Thank you so much in advance! 

[Dan-From-Ryviu]

Hi @avaskye Sorry for missing your message. Please update code following this: 

Add this code Custom CSS of Image banner section that you want to hide on mobile

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

And this to section you want to hide on desktop

@media (min-width: 768px) {
  .banner {
    display: none;
  }
}

[BellandPedre]

Hello. I tried this on a Slider Section but the pagenation still appears.

[Moeed]

Hey @BellandPedre 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[Dan-From-Ryviu]

Hi @BellandPedre , if you add slideshows, please use this code

For desktop slide

@media (max-width: 767px) {
  .slideshow {
    display: none;
  }
}

For mobile slideshow 

@media (min-width: 768px) {
  .slideshow {
    display: none;
  }
}

[Auoehrper]

Hi, I can hide the slideshow using this code but not the bottom slider, what should I do.

[Dan-From-Ryviu]

Please update the code 

Desktop: 

@media (max-width: 767px) {
  slideshow-component {
    display: none;
  }
}

Mobile

@media (min-width: 768px) {
  slideshow-component {
    display: none;
  }
}

[SebPotet]

Hi Dan,

Your solution is nice and easy although I have a question : when I run a speedtest through Lighthouse, it seems that the image that is not displayed (basically the desktop version when on mobile and vice versa) is still loading behind => is there a way to enable lazy loading ?

Thanks for your help !

[Dan-From-Ryviu]

It could be solved for mobile or desktop only, could not be solved both devices by open your image banner or slideshow liquid file, find this line of code. 

loading="lazy"

Change to this 

{% if forloop.first == false %}
loading="lazy"
{%- endif -%}