-1

I'm trying to insert a simple media query so that the submit form spans 90% width of the page when viewed on a phone (it's set to 50% at all other times). When I scale the viewport down, it doesn't pick up the media query. Here is my code:

scss:

@media(max-width:767px){
  .submit{
    width: 90%;
  }
}

.submit{
      width: 50%;
      margin: auto;
      margin-top: 300px;
      margin-bottom: 300px;

      .submitBackground{
        background-color: $orange;
        opacity: .6;
        padding: 20px;
      }
      .submitEvent{
        background-color: white;
        opacity: .6;
        button{
          margin-top: 15px;
          margin-bottom: 15px;
        }
      }
    }
    form{
      width: 80%;
      margin: auto;
      text-align: center;
      padding: 20px;
      .form-control{
        margin: 10px;
      }
      .radio-inline{
        margin: 10px;
        position: relative;
      }
    }
cimmanon
  • 67,211
  • 17
  • 165
  • 171
Margaret
  • 273
  • 1
  • 6
  • 14
  • It takes *all* of this code to reproduce the problem? – cimmanon Oct 13 '14 at 15:26
  • possible duplicate of [Why do the order of media queries matter in CSS?](http://stackoverflow.com/questions/8790321/why-do-the-order-of-media-queries-matter-in-css) – cimmanon Oct 13 '14 at 15:27

1 Answers1

0

Your media query needs to be after the non-media query declaration. Otherwise it will not be able to override the property. 

.submit {
  ...
}

@media (max-width:767px) {
  .submit{
    width: 90%;
  }
}
Jivings
  • 22,834
  • 6
  • 60
  • 101