Search code examples
htmlcssresizeborder

How do I resize the border of the body as the window resizes in CSS


I have a small, green border on the right, to add a little readability. If you shrink the window however, you can see it just ends up covering everything. It looks equally absurd on a mobile device screen too. How do I make it so it resizes?

body {
  color: #325050;
  background: #fff;
  font-family: 'Libre Baskerville', sans-serif;
  font-size: 80%;
  border-right: 50em solid;
}

Solution

  • Try it like this:

    body {
      color: #325050;
      background: #fff;
      font-family: 'Libre Baskerville', sans-serif;
      font-size: 80%;
      border-right: 50vw solid; /* changed*/
    }
    

    1vw = 1% of viewport width

    1vh = 1% of viewport height

    These measurements give you a nice way to define width and height of things like border in percentages.

    For sizing things relative to the current viewport size you can find out more here