Use the Custom CSS to hide a section on small screens

Use the Custom CSS to hide a section on small screens

Polleke
Shopify Partner
7 0 3

I've tried to use the Custom CCS box at a section to hide that particular section on mobile screens, by adding:

 

@media screen and (max-width: 600px) {
  display: none;
}

 

Unfortunately, the section is still visible on mobile screens . 

Polleke_0-1699359624768.png


The section itself is a Custom Content section (one of the standard sections of the Impulse Theme) containing  HTML to display 5 formatted links.

The purple links under the banner look OK on desktop. 

Polleke_0-1699358569791.png


But on smaller screens (mobile devices)
those purple links don't look good and the section should be hidden

Polleke_1-1699358635784.png

What are we doing wrong, when using the section level CSS box with the code snippet above?


Note: if we're able to hide a section on mobile, the next step is to add another section that can be shown only on mobile devices, and will be optimised for smaller screens.

 

 

Reply 1 (1)

maxdanko
Shopify Partner
29 3 7

Hello, for this you need to specify the item selector inside the media query, i.e.

 

@media screen and (max-width: 600px) {
  .class-name {
    display: none;
  }
}