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


Tags: html,css,resize,border

Problem :

I just recently finished my site.

http://www.willigetdivorced.com

If you visit it real quick, you will notice the 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;
}

Here's the body portion of my CSS file.



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


    CSS Howto..

    how to position a search bar in html/css

    How to reuse and override Css style?

    How do you achieve this backwards div effect? [closed]

    How to create an absolutely positioned submenu which appears on css hover

    How to style focus on jquery ui dialog widget?

    How to get css hover values on click?

    How to remove unused CSS but keep comments?

    How to make a visible rectangular frame in CSS to contain some sections of my view?

    How to make margin collapsing work with input type=button/submit?

    How do you modify wordpress css for posts?

    How to show the width of an element in the content of an ':after' pseudo-element?

    CSS - How to use “vertical-align : middle” with a table near an image?

    how do i get an div to stay in place while text around it gets bigger or shorter

    How to remove “left” value bootstrap popover

    How can I center the page to allow background on sides?

    How do i add a cookie to my popup form? Built only with css and html [closed]

    How to change a span to look like a pre with CSS?

    How to fix redefinition warnings from CSS Validator?

    Fill dynamic
    's with content. But how to show it?

    How do I add multiple linear-gradients to a css background? If

    How to separate different properties of a css gradient?

    How do I reduce the vertical space between list items in an unordered list?

    How to retrieve the real height of a #div (including overflowed parts)

    How to set line spacing of an ordered list consistently across browsers?

    How to style 3 (div) boxes using CSS

    How to make interactive logo design without flash?

    How to edit a css file in ASP.NET using C# to change the website design

    How to style jQuery UI's autocomplete list for mouse leave event?

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    CSS / Javascript: hidden div does not take full width after being shown