Hide custom content section, desktop view only!

Store Design
, , ,
1

Hi guys,

How to hide custom content section, desktop view only!

Alliance_0-1672871787086.png
Alliance_0-1672871787086.png1920×1080 299 KB

Thank you

allianceautoproducts.com

2

Hello @Alliance

Sorry, I couldn’t find the custom module you’re trying to edit on the home page.
Can you double-check that you have hidden it? or send me a more detailed picture of where that module is on the page?

Kind & Best regards,

GemPages Support Team

3

I hideded it. Try now

4

You got it!

5

Hello @Alliance

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_2-1672889111678.png
GemPages_2-1672889111678.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_3-1672889153766.png
GemPages_3-1672889153766.png1600×860 71.2 KB

This code can show section on desktop and hide it on small version.

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

6

Hi @Alliance

Please follow these steps:

  1. In Shopify Admin, Go to Online Store → Themes → Edit Code
![view (30).png|1891x940](upload://gnqBIzcqycLi7gAB4coGQZQWUqr.png)
  1. Go to the file Assets/theme.scss.css (or maybe theme.css) and add the following code at the end of the file:
@media only screen and (max-width: 800px) {
   #shopify-section-edf565e2-3c1a-480e-808e-9f94b1f2a075 {
      display: none !important;
   }
}

I hope that it will work for you.

7

Must be visible on moibe view only, thats what I meant by “Hiden on Desktop only” with an option to show it back when required.

Thank you

8

Hi @Alliance

Sorry, I misunderstood your question. You can change the code to the following to hide the display on the desktop:

@media screen and (min-width: 769px) {
   #shopify-section-edf565e2-3c1a-480e-808e-9f94b1f2a075 {
      display: none !important;
   }
}

I hope this is the standard screen width you want to display on mobile.