'Responsive CSS viewport tag

I'm learning about the responsive CSS styling. I'm trying the example code on the w3schools but the viewport tag doesn't seem to work. When i change the initial-scale value or the content from width=device-width to for. e.g. 300 NOTHING happens! I've tested the code on both my desktop FireFox and Opera browsers...

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

.header {
  border: 1px solid red;
  padding: 15px;
}

.menu {
  width: 25%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.main {
  width: 75%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="menu">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="main">
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>
htmlcss


Solution 1:[1]

You should include @media queries in your page. For e.g

@media only screen and (max-width: 768px) {
     /*CSS goes here*/
}

Check this https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anamika Sharma

Related Questions