Website set width when a certain size is reached

Hey guys I am a beginner in web development with css. I have a problem with the width of my website: I set it up that my page will take 70% of the Screen with : max-with: 70%. When I reduce the size of the window I want to set it to 100% when it reaches a certain size like 600 px. How can I realize that?

Normal size

window mode

Solution

I think that you are looking for css media queries which are generally used to make a web page responsive. If that is the case the answer is very simple, you just have to specify a media query for that section of body which will do the task.

the link below tells you the concept of media queries in detail, so check it out with this link

.section {
  width: 70vw;
  height: 200px;
  background-color: #000;
  margin: auto;
  color: #fff;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  .section {
    width: 100vw;
  }
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="section">
  hello world
</div>

</body>
</html>

Btw your desired code for that outcome is written above so you can go through it as well!!! Try resizing the browser window for results...

Hope that helps you! greetings, Om Chaudhary