Magento 2: how to set an element to disappear when viewing in mobile device?

Question

In Blank theme, the header account links disappear from header when viewing in mobile device. Since I moved those links to another area of my store, I want to set the CSS rules to do the same.

I tried the following code in my custom theme which overrides Blank but didn't work:

@media only screen and (min-width: @screen__m) { .header.content .links { display: inline-block; } } .header.content .links { display: none; }

I want the links display when screen is 768px or wider but disappear otherwise.

Why are those CSS rules duplicated?

Answer 1

The problem is that you set display: none after the media query, resulting the media query having no effect. You need to reorder the rules like this:

.header.content .links {
     display: none;
 }
 @media only screen and (min-width: @screen__m) {
    .header.content .links {
        display: inline-block;
    }
}