Problem with @media query

Asked

Viewed 413 times

1

I have a serious problem with Media Query, I am testing in this code and does not change the state at all, reduce the screen to the maximum and the colors continue without changing; HELP

 .box{
  width: 200px;
  height: 200px;
  background-color: red;
}
.box2{
  width: 250px;
  height: 250px;
  background-color: blue;
}
.box3{
  width: 150px;
  height: 150px;
  background-color: pink;
}
@media screen (min-width:480px){
  .box{
    width: 200px;
    height: 200px;
    background-color: black;
  }
  .box2{
    width: 250px;
    height: 250px;
    background-color: green;
  }
  .box3{
    width: 150px;
    height: 150px;
    background-color: grey;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Teste</title>
  <link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
  <header>
  <div>
  <div class="box"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>
</header>
</body>
</html>

css media-queries

2 answers

2


Change this line @media screen (min-width:480px){ for:

@media screen and (min-width:480px){

EXAMPLE in jsfiddle

Note that so the styles that are set in within that media querie are applied when the window is larger than 480px. If you want them to happen when the window size is less than 480px:

@media screen and (max-width:480px){

EXAMPLE in jsfiddle

  • Thank you so much, it worked out great.

  • You’re welcome @Filipetrader

1

You need to declare the viewport in the head of html:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

From there, you can set the media queries in css normally.

And remembering that it is necessary to put "and" after screen, as in the above answer

@media screen and (min-width:480px)

More about viewport at w3cSchools

  • Thank you very much my good, it worked.

Browser other questions tagged css media-queries

You are not signed in. Login or sign up in order to post.