How to hide a section only on mobile

[lukafernada]

On my mobile I want the slideshow to be Small, and on desktop to be medium. My plan is to have two slideshow sections and hide the small one on the desktop, and hide the medium one on the mobile.

So how can I make a slide hidden on specifically mobile / desktop view

[BSSCommerce-HDL · Accepted solution]

Hi @lukafernada, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (min-width: 750px) {
  #shopify-section-template--20584607220061__slideshow_NhjrjP {
     display: none;
  }
}

@media only screen and (max-width: 749px) {
  #shopify-section-template--20584607220061__5a90b9b4-ada0-472e-93a0-a9e4e6fcd0b8 {
     display: none;
  }
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSS-TekLabs]

- Here is the solution for you @lukafernada 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
@media only screen and (max-width: 599px) {
section#shopify-section-template--20584607220061__5a90b9b4-ada0-472e-93a0-a9e4e6fcd0b8 {
    display: none !important;
}
}
@media only screen and (min-width: 600px) {
section#shopify-section-template--20584607220061__slideshow_NhjrjP {
    display: none !important;
}
}
</style>

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.