vs code not working for media query in css

Question

vs code not working for media query in css

2k Views Asked by Pentakota Lalith Prasad At 15 October 2022 at 13:12

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
  
  <title>Frontend Mentor | QR code component</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet  -->
  <style>
    @media screen (max-width: 300px) {
      .body {
        background: blue;
      }
    }
    .attribution { font-size: 11px;
       text-align: center; 
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       background-color: rgb(244, 244, 244);
       margin-top: 1%;
       margin-left: 30%;
       margin-right: 30%;
       margin-bottom: 1%;
       border-radius: 10px;
       width: 300px;
       padding: 10px;
       padding-right: 20px;      
      }
    .attribution a { color: hsl(228, 45%, 44%); }
    body {
      background-color: red;
    }
    .fade {
      color: #a9a9b1a7;
      font-size: 14px;
    }
    .QR {
      width: 310px;
      height: 320px;
      border-radius: 10px;
      margin:0%
    }
  </style>
</head>
<body>
  <div class="attribution">
    <img src="images/image-qr-code.png" alt="img" class="QR">
    <h1>Improve your front-end skills by building projects
    </h1>
    <h2 class="fade">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="#">lalith prasad</a>.</h2>
  </div>
</body>
</html>

why my background color is not changing accordingly to the code of media screen.

why my background color is not changing accordingly to the code of the media screen? I used a simple code of media query isn't working. plz, provide a solution for this.

Original Q&A

There are 3 best solutions below

**Utku Demir** · Answer 1 · 2022-10-15T13:37:12.240000

You have a class named attribution and the related div has a width of 300px with some paddings. Therefore, the width of div becomes 300px + {paddingLeft} + {paddingRight} = 330px. Therefore, your screen width cannot be 300px even if you don't have the margins; hence, the media query condition is always false.

Possible solutions to this problem can be:

Leveraging the width or not giving a width to the div that has the attribution class,
Changing the media query condition.

**Behrad Hajmiri** · Answer 2 · 2022-10-15T14:00:30.447000

correct form of using media query is:

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

and you should change

 .body {
    background: blue;
  }

to

 body {
    background-color: blue;
  }

and because of specificity in css, you should use media query at the last part of style. So your code should be like this:

<style>
.attribution {
  font-size: 11px;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: rgb(244, 244, 244);
  margin-top: 1%;
  margin-left: 30%;
  margin-right: 30%;
  margin-bottom: 1%;
  border-radius: 10px;
  width: 300px;
  padding: 10px;
  padding-right: 20px;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

body {
  background-color: red;
}

.fade {
  color: #a9a9b1a7;
  font-size: 14px;
}

.QR {
  width: 310px;
  height: 320px;
  border-radius: 10px;
  margin: 0%
}

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

**dantheman** · Answer 3 · 2022-10-15T14:02:46.717000

A few things here:

.body should be body
Media query should come after the initial body declaration
Format of media query is @media only screen and

body {
  background-color: red;
}

@media only screen and (max-width: 300px) {
  body {
    background: blue;
  }
}

vs code not working for media query in css

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in VISUAL-STUDIO-CODE

Related Questions in MPMEDIAQUERY

Trending Questions

Popular # Hahtags

Popular Questions