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

pkf92
Visitor
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

Replies 3 (3)

pkf92
Visitor
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?

LitExtension
Shopify Partner
4860 1001 1133

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
Check out our Shopify migration app to migrate your online store to Shopify

diego_ezfy
Shopify Partner
2935 562 883

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.

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.