Disable "display: none;" in CSS3/ Susy

Question

so I am working with Susy2 and Susy-breakpoints. Now I have the problem, that a button should be displayed on all breakpoints, except the smallest one.

My company uses a mobile-first approach, which means the smallest breakpint is styled first, and all other breakpoints are based off of that first one.

Since I need to hide the button on the smallest breakpoint, I used display: none on it, but I can't find a way to show the button again on the larger breakpoints.

Now my question is, can I get rid of 'display: none' any way, or is there any other way I can hide and show the content?

I can't just use 'visibility: hidden', since the remaining elements need to move up and take that space.

Also, just setting the 'display' property to another value doesn't work for me, not even with !important.

Here is my current code for the hidden button:
HTML:

<div>
  <a href="${item/link}" class="button">Weiterlesen</a>
</div>

And CSS:

.button{
  display: none;
}

And for the part where i need to enable it again:
CSS:

.button{
  display: block !important;
  border: 1px solid #67717D;
  border-radius: 3px;
  height: 40px;
  margin: auto 10px 20px 10px;
  text-align: center;
}

Answer 1

Use media-query

Learn here:https://www.w3schools.com/css/css3_mediaqueries_ex.asp\

For eample(in size screen that smaller than 600px it will hide):

@media screen and (min-width: 600px) {
     .button{
      display: block !important;
      border: 1px solid #67717D;
      border-radius: 3px;
      height: 40px;
      margin: auto 10px 20px 10px;
      text-align: center;
      }
    }
.button{
  display: none;
}

<div>
  <a href="${item/link}" class="button">Weiterlesen</a>
</div>

Note!

to use media-query you must put this meta in head tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

Make use of CSS @media Rule (you can change the breakpoint by yourself)

When building mobile first, always put the style of the mobile (smallest screen) on the top of your css file. Then make use of min-width when adding style for larger screens, that is the best way to build mobile first applications.

.button{
  display: none;
  border: 1px solid #67717D;
  border-radius: 3px;
  height: 40px;
  margin: auto 10px 20px 10px;
  text-align: center;
}

@media screen and (min-width: 480px) {
    .button{
      display: block;
    }
}

<div>
  <a href="#" class="button">Weiterlesen</a>
</div>