如何将页面中的内容调整为仅占用屏幕宽度？

Question

Using dev tools my content shrinks at lower bps. Everything from my header nav to footer is inside a container. Container is set to:

.container {
    width: 800px;
    margin: 0 auto;
    border: 2px solid green;
}

At 800px, I have a horizontal scroll and the content shrinks, adding space to the bottom of the footer. Using a media query, how could I fill the screen with the container? screen at 788 bp

Answer 1

I think you're looking for media queries:

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

Check out the docs here .

Cheers!

Answer 2

width:100% this will make the container div to take-up all of the viewport.

Answer 3

I think what you want is width: 100% and max-width: 800px .