CSS @media query breaking site-CodePudding

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

CodePudding user response：

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

CodePudding user response：

In first commented section You forgot to close a scope }

CodePudding user response：

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 >
Hi
</button>