How can I make it so that the content takes up the whole viewport width on smaller screens, but only 50% on larger screens?

Question

I've been working on a site and so far for PC it looks fine, the content takes up 50% of the screen and is centered, but of course it maintains this when viewing the page on a mobile device too, not allowing enough space for the content to site properly. How can I make it so that the blank space around the content is removed when shrinking the window.

Example of the current layout:

<div class=content></div>

CSS:

.content{
  margin:auto;
  width:50%;
  height:100vh;
  background-color:black;
}

https://codepen.io/BaileyLylyk/pen/poOZMyY

Answer 1

You can use media query from css to change the style based on properties.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries /Using_media_queries

In your case should be something like:

 @media (max-width: 600px)
.content {
    width: 100%;
}