How to use @media screen to define different style for different browser size for responsive web page in HTML and CSS

1 Answer

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing:border-box;
}

.left {
  background-color:blue;
  padding:10px;
  float:left;
  width:25%; 
}

.center {
  background-color:lightgray;
  padding:10px;
  float:left;
  width:50%;
}

.right {
  background-color:red;
  padding:10px;
  float:left;
  width:25%; 
}

@media screen and (max-width:800px) {
  .left, .center, .right {
    width:100%; 
  }
}
</style>
</head>
<body>

<div class="left">
  <p>Left</p>
</div>

<div class="center">
  <p>Center</p>
</div>

<div class="right">
  <p>Right</p>
</div>

</body>
</html>

70+ SQL courses for beginners and professionals

answered Dec 29, 2018 by avibootz

Most popular tags

How to use @media screen to define different style for different browser size for responsive web page in HTML and CSS

1 Answer

Related questions