CSS @media query breaking site

April 25, 2022

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

>Solution :

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