CODEWITHSUNDEEP
css
Krizs
Krizs

Reputation: 65

CSS Media Queries not working as intended

Second media querie works fine - (min-width: 601px) and (max-width: 992px) - but the first on just does not work - (max-width: 600px).

Am i missing something? Cause even if i add min-width to first one it still does not work.

.center {
 font-size:70px;
 color:white;
 position: absolute;
 height: 50px;
 top: 40%;
 left: 30%;
 margin-left: -50px; /* margin is -0.5 * dimension */
 margin-top: -25px; 
 text-align: center;
 font-family: "Josefin Sans";
 font-weight: bold;
}​

@media only screen and (max-width: 600px){
body {
   background-color: olive;

 }
.center{
  margin-left:-135px;
  font-size:60px;
 }
}

@media screen and (min-width: 601px) and (max-width: 992px){
body {
   background-color: blue;
 }
}

Upvotes: 2

Views: 178

Answers (2)

לבני מלכה
לבני מלכה

Reputation: 16261

You have some dot in your code remove it (see image)

Here is working one:https://jsfiddle.net/tben7qz8/4/

You can try @media screen and (max-width: 600px) without only

enter image description here

Upvotes: 1

Krizs
Krizs

Reputation: 65

There was a hidden symbol behind the brackets. Noticed that when i posted the code.

Upvotes: 0

Related Questions