Hiding elements with CSS Media Query

Question

I'd like to know what is the correct way to make a CSS class system to hide elements responsively to the screen size.

My current approach is to use such media queries:

/* From 768 to 1023 px */
@media (min-width: @screen-sm) and (max-width: (@screen-md - 1))
{
    .hide-sm { display: none; }
}

/* From 1024 to 1199 px */
@media (min-width: @screen-md) and (max-width: (@screen-lg - 1)) 
{
    .hide-md { display: none; }
}

The issue is that when screen is exactly (@screen-md - 1) wide, let it be 1023 px, none of .hide-sm and .hide-md elements will be hidden.

But if not to subtract 1px from @screen-md making the range from 768 to 1024 px, there will be another issue: both of .hide-sm and .hide-md elements will be hidden on 1024 px screen.

Example: https://codepen.io/vyprichenko/pen/ZKvGKM

Answer 1

You're on the right path but it looks like you're not using the media queries correctly. If we only want to show and element up until a certain point, use max-width, if we want the element to show up after a certain point, we need the min-width media query. I was able to use this code to get the results you need:

   @media(max-width:1023px){
      .hide-0-to-1024{
        display:none;
      }
    }

@media (min-width: 1024px) {
      .hide-1024-up {
        display: none;
      }
}