'CSS @media query breaking site [closed]

Can anyone see where I have gone wrong with the commented out media queries?

They work but break other elements on the page. There is only one element on the site with the class .btn-primary-mast-reapply


.btn-primary-mast-reapply {
    background-color: #FFB323;
    border-color:transparent;
    color:#0B4A74;
    font-weight: 700;
}

/*@media ( max-width: 991px ) {
  .btn-primary-mast-reapply {
    background-color: #0B4A74;
    color:#FFB323;
  }*/

.btn-primary-mast-reapply:hover,
.btn-primary-mast-reapply:focus,
.btn-primary-mast-reapply:active,
.btn-primary-mast-reapply.active,
.btn-primary-mast-reapply.active.focus,
.btn-primary-mast-reapply.active:focus,
.btn-primary-mast-reapply.focus,
.btn-primary-mast-reapply.focus:active,
.btn-primary-mast-reapply:active:focus,
.btn-primary-mast-reapply:focus {
    background-color: #FFBC3E;
    border-color:transparent;
}

/*@media ( max-width: 991px ) {
  .btn-primary-mast-reapply:hover,
  .btn-primary-mast-reapply:focus,
  .btn-primary-mast-reapply:active,
  .btn-primary-mast-reapply.active,
  .btn-primary-mast-reapply.active.focus,
  .btn-primary-mast-reapply.active:focus,
  .btn-primary-mast-reapply.focus,
  .btn-primary-mast-reapply.focus:active,
  .btn-primary-mast-reapply:active:focus,
  .btn-primary-mast-reapply:focus {
    background-color: #155d8c;
    border-color:transparent;
    color: #FFB323;
  }
}*/
cssresponsive-design


Solution 1:[1]

I noticed that you don't have a closing bracket for your first media query.

  ...
      @media ( max-width: 991px ) {
        .btn-primary-mast-reapply {
        background-color: #0B4A74;
        color:#FFB323;
      }
  } <-- this one

Solution 2:[2]

In the first commented section you forgot to close a scope with }

Solution 3:[3]

You were missing a closing bracket in your first @media

.btn-primary-mast-reapply {
  background-color: #FFB323;
  border-color: transparent;
  color: #0B4A74;
  font-weight: 700;
  width: 200px;
}

@media (max-width: 991px) {
  .btn-primary-mast-reapply {
    background-color: #0B4A74;
    color: #FFB323;
  }
} /* <------ this guy right here */

.btn-primary-mast-reapply:hover,
.btn-primary-mast-reapply:focus,
.btn-primary-mast-reapply:active,
.btn-primary-mast-reapply.active,
.btn-primary-mast-reapply.active.focus,
.btn-primary-mast-reapply.active:focus,
.btn-primary-mast-reapply.focus,
.btn-primary-mast-reapply.focus:active,
.btn-primary-mast-reapply:active:focus,
.btn-primary-mast-reapply:focus {
  background-color: #FFBC3E;
  border-color: transparent;
}

@media (max-width: 991px) {
  .btn-primary-mast-reapply:hover,
  .btn-primary-mast-reapply:focus,
  .btn-primary-mast-reapply:active,
  .btn-primary-mast-reapply.active,
  .btn-primary-mast-reapply.active.focus,
  .btn-primary-mast-reapply.active:focus,
  .btn-primary-mast-reapply.focus,
  .btn-primary-mast-reapply.focus:active,
  .btn-primary-mast-reapply:active:focus,
  .btn-primary-mast-reapply:focus {
    background-color: #155d8c;
    border-color: transparent;
    color: #FFB323;
  }
}
<button class="btn-primary-mast-reapply">
Hi
</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 zayadur
Solution 2 Zach Jensz
Solution 3 AStombaugh

Related Questions