Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Hide sections from mobile end-Dawn theme

Solved

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

NataliaWu
Tourist
6 0 3

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?

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

This is an 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;
  }
}

Screenshot 2024-01-11 at 13.59.19.png

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 37 (37)

Abdosamer
Shopify Partner
938 173 193

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
NataliaWu
Tourist
6 0 3

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.

IMG_3756.PNG 

Abdosamer
Shopify Partner
938 173 193

@NataliaWu , Can you please share your store url ?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
Abdosamer
Shopify Partner
938 173 193

@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.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
NataliaWu
Tourist
6 0 3

@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
Tourist
6 0 3

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

Abdosamer
Shopify Partner
938 173 193

@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. 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

Moeed
Shopify Partner
6332 1716 2069

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Dan-From-Ryviu
Shopify Partner
10261 2039 2110

This is an 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;
  }
}

Screenshot 2024-01-11 at 13.59.19.png

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

NataliaWu
Tourist
6 0 3

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

MattB07
Shopify Partner
3 0 1

The best, simplest answer. Thank you

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

Happy I could help😘

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

avaskye
Excursionist
48 0 7

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
Shopify Partner
10261 2039 2110

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;
  }
}

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

BellandPedre
Visitor
1 0 0

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

Moeed
Shopify Partner
6332 1716 2069

Hey @BellandPedre 

 

Share your Store URL and Password if enabled.

 

Best Regards,

Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Dan-From-Ryviu
Shopify Partner
10261 2039 2110

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;
  }
}

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Auoehrper
Tourist
11 0 1

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

Auoehrper_0-1723701724112.png

 

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

Please update the code 

Desktop: 

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

Mobile

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

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

SebPotet
Tourist
9 0 2

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
Shopify Partner
10261 2039 2110

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 -%}

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

CDBLtd
Excursionist
19 1 3

Thank you for this. It works for hiding banner on mobile but not on desktop for me.

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

Please try to update the code

- Add this code to Custom CSS of mobile section.

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

- Add this code to Custom CSS of desktop.

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

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

CDBLtd
Excursionist
19 1 3

Thanks, but still not working right for me. Basically, I just want to hide for desktop.

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

So just add this code to Custom CSS of that section. Also, could you share your page so I can check? 

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

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

CDBLtd
Excursionist
19 1 3

I added your code, but still the same issue on desktop.  You can see on this page (green section): https://fd94b3-bd.myshopify.com/collections/all-available/Available

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

Could you take screenshot where did you add the code? 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

CDBLtd
Excursionist
19 1 3

Screenshot 2024-10-21 at 10.57.37 PM.png

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

You can try to update code to this.

@media (min-width: 750px) {
#shopify-section-template--17425720705190__image_banner_UgDTPh { 
    display: none !important; 
}
}

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

CDBLtd
Excursionist
19 1 3

I get error message "Online store session editor cannot be published" with the new code.

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

So please add this code the theme.liquid file after <head> in Online Store > Themes > Edit code 

<style>
@media (min-width: 750px) {
#shopify-section-template--17425720705190__image_banner_UgDTPh { 
    display: none !important; 
}
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

CDBLtd
Excursionist
19 1 3

That hid the collection page banner, not the section I needed hidden on desktop:  https://fd94b3-bd.myshopify.com/collections/all-available/Available

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

What section do you want to hide on the desktop?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

CDBLtd
Excursionist
19 1 3

I want to hide the green section "Current Collection" for desktop only.

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

Please update code 

<style>
@media (min-width: 750px) {
#shopify-section-template--17425720705190__rich_text_ekjCDD { 
    display: none !important; 
}
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

CDBLtd
Excursionist
19 1 3

That's it! THANK YOU so much! 🙏

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

You are very welcome! 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.