CODEWITHSUNDEEP
htmlcssfrontend
stardusted
stardusted

Reputation: 38

My media queries doesn't work

Does anyone know why my media queries code doesn't work?Thanks! 

@media only screen and (min-width:450px){
  .dark-blue{
    width: 25%;
  }
  .blue{
    width: 75%;
  }
}

More details in my github https://github.com/kmfb/udacityProjects/tree/master/column%20drop

Upvotes: 0

Views: 979

Answers (3)

Mohammed Wahed Khan
Mohammed Wahed Khan

Reputation: 898

It mostly depends on your project because at the end of the day it is all about maintenance and adding more stuff to it easily.

So, if you are working on a project which only has a few media queries I would suggest leaving them all at the bottom of your stylesheet but putting comments on top of it to make it explicit and also easier for you to find it later.

However, if you know you are going to have a lot of properties meticulously defined in your media queries and also have various devices defined then I would suggest separating them out just for readability/maintenance reasons.

Upvotes: 0

Gezzasa
Gezzasa

Reputation: 1453

It works, but you need to place your media query below your other CSS. Otherwise it won't overwrite anything.

Upvotes: 0

Roy Bogado
Roy Bogado

Reputation: 4462

Just move the @media to the bottom of the css page.
Check working example.
Cheers,
https://jsfiddle.net/frc7r123/

Upvotes: 2

Related Questions