How to show content only on phone or desktop?

How to show content only on phone or desktop?

DanGadgets
New Member
4 0 0

How to show content only on mobile or desktop in refresh mode?

Dear professional coders/editors, I really need your help with this one.

thank you

Replies 2 (2)

Simonsron
Shopify Partner
699 87 122
@media screen and (min-width: 750px) {
  .d-lg-none {
    display: none !important;
  }
}
@media screen and (max-width: 749px) {
  .d-m-none {
    display: none !important;
  }
}

 

Hello.
Above is a piece of css code I gave you, you can find your theme.css (theme.css.liquid) file, this file is under the assets directory. Then put it at the bottom of this file.

Then add a class name of (d-m-none) to the elements you need to display only on desktop; add a class name of (d-lg-none) to the elements you need to display only on mobile.

I hope this helps you solve your problem!

banned

GemPages
Shopify Partner
5625 1261 1241

Hello @DanGadgets 

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you? And don't forget to show me where you need to work.

Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center