How to hide a section on mobile / tablet - only display on Desktop

pkf92
New Member
2 0 0

Hi all 

 

Please can some one help? I am trying to show this image only on desktop and use different images for Mobile/Tablet. I need to hide the image from Mobile/Tablet and then upload a new image and hide that from Desktop so 2 different images show on Mob/desktop. 

 

Please see screenshot of the image I am referring to.

 

Preview link: https://www.fluxundies.com/?_ab=0&_fd=0&_sc=1

 

Thanks, 

Screenshot 2021-05-14 at 17.59.14.png

Paige

0 Likes
pkf92
New Member
2 0 0

I have figured out how to hide it on mobile! Now i just need help adding a new section that doesn't display on Desktop! Only shows on Mobile / Tablet?

0 Likes
LitExtension
Shopify Partner
926 110 162

Hi @pkf92

- You can try to use 2 sections has class like this

<div class=“name-of-your-section section—mobile”></div>

<div class=“name-of-your-section section—desktop”></div>

So you can use this style like this:

@media screen and (min-width: 1024px) {

.section—mobile {

display: none;

}

}

@media screen and (max-width: 1023px) {

.section—desktop {

display: none;

}

}

Hope this helps! 

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes

Which section exactly would you like to show/hide? I'd need to see it live (or know its CSS selector) to provide further assistance. Currently the screenshot you've presented is not visible on the website.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes