Toggle display of <hr /> with media query-CodePudding

I'm trying to have a specific class of hr display when the screen width goes below x pixels. I'm fine with the media query side of things, I'm just unsure what the display property of a hr element should be to have it display as a standard 100% width horizontal line.

I have a class currently to hide the hr element which will be used if screen size is >1080px

.hrHide {display: none;}

CodePudding user response：

If your media-query just hides the HR when the screen is greater than 1080px, then by default, when its less its going to take the default display with 100% width, no need to override it. Just

@media screen and (min-width: 1080px) {
  .hrHide {
    display: none;
  }
}

If you want to make sure, you can use display: initial so the browser gives the HR its default display

@media screen and (min-width: 1080px) {
  .hrHide {
    display: none;
  }
}

@media screen and (max-width: 1079px) {
  .hrHide {
    display: initial;
  }
}

If you want to be explicit, the way to set an object to ocupie all its horizontal space is with display: block (which btw is the default display that browsers like firefox give it)

@media screen and (min-width: 1080px) {
  .hrHide {
    display: none;
  }
}

@media screen and (max-width: 1079px) {
  .hrHide {
    display: block;
  }
}