Solved

Hide sections from mobile end-Dawn theme

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
6978 1319 1344

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 12 (12)

Abdosamer
Shopify Partner
821 146 161

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
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
821 146 161

@NataliaWu , Can you please share your store url ?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
Abdosamer
Shopify Partner
821 146 161

@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
Profolio
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
821 146 161

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

Moeed
Shopify Partner
3542 892 1107

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 developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App

Dan-From-Ryviu
Shopify Partner
6978 1319 1344

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- 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
6978 1319 1344

Happy I could help😘

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now