Question 38888 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

vs code not working for media query in css – Ubuntu

<!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.

Tags:

3

Answers


  1. 0

    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.
    Login or Signup to reply.
  2. 0

    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;
  }
}
    Login or Signup to reply.
  3. 0

    A few things here:

    1. .body should be body
    2. Media query should come after the initial body declaration
    3. Format of media query is @media only screen and
    body {
  background-color: red;
}

@media only screen and (max-width: 300px) {
  body {
    background: blue;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search