CODEWITHSUNDEEP
javascriptcsshtml
AziCode
AziCode

Reputation: 2692

One of my media queries is not responding

everything works fine with the first and third media query

but when my screen is in the middle one:

@media only screen and (min-width: 481px) and (max-width: 600px)

it doesn't work .

@media only screen and (min-width: 300px) and (max-width: 480px) {
  // some css styles //

}
@media only screen and (min-width: 481px) and (max-width: 600px) {
  // some css styles //

}
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  // some css styles //

}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>New Responsive design web page</title>
  <meta charset="utf-8" />

  <link rel="stylesheet" href="stylesheetTest.css" type="text/css" />
  <meta name="viewport" content="width=device-width , initial-scale = 1.0" />
</head>

Upvotes: 0

Views: 70

Answers (1)

Natsu
Natsu

Reputation: 2175

You have an extra } at the end of your second media query (right after the .Finish selector).

Once removed it works as expected: Fiddle example

Upvotes: 1

Related Questions