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;
}

`on the smallest breakpoint` do you want to `hide/show` button according screen size? — לבני מלכה, Aug 01 '18 at 08:27
Welcome to SO. Please take a tour of the [help centre](http://stackoverflow.com/help) to see [how to ask a good question](http://stackoverflow.com/help/how-to-ask). We cannot help you if you do not provide enough code to replicate your problem - see how to create a [MCVE] — Pete, Aug 01 '18 at 08:28

Dennis · Answer 1 · 2018-08-01T08:41:43.377

1

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>

edited Aug 01 '18 at 08:41

answered Aug 01 '18 at 08:36

Dennis

1,281
13
30

actually, the susy-breakpoints are nearly the same as the media-rule, but the new styles for larger breakpints get stacked on top of the smaller ones, so i can't just write new CSS for larger screens, but adapt the existing CSS... – SophisticOtter Aug 01 '18 at 09:24
Why are the breakpoints added on top of the current css? It would be very difficult to easy style a simple thing like this button.. I mean, I'm not familiar with susy, but at the end, the susy will be compiled to just css – Dennis Aug 01 '18 at 09:30
actually, I don't really know why I have to use the Susy-breakpoints, but that's what the company told me to do... – SophisticOtter Aug 01 '18 at 12:43

לבני מלכה · Answer 2 · 2018-08-01T08:39:28.633

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">

that what do you mean? – לבני מלכה Aug 01 '18 at 08:36 — לבני מלכה, Aug 01 '18 at 08:36

Disable "display: none;" in CSS3/ Susy

2 Answers2