Text gets squashed when re-sizing web browser HTML | CSS -

Text gets squashed when re-sizing web browser HTML | CSS -

the text on website not re-size correctly when making browser window smalller. squashes text in middle , makes more lines. here code

my whole document

html: http://pastebin.com/kj1jvtjv css:http://pastebin.com/a1cp7viq

html:

</div> <div id="newsposts"> <p>toontown classic coming soon</p> </div>

css:

#newsposts{ position: relative; bottom: 0px; top: -925px; width: 45%; position: center; margin: 0 auto; font-size: 20px; margin-left: 10; margin-right: 10; text-indent: 5; }

i can't tell how want work question. if want font-size dynamically alter based on view size of browser, utilize vw units (see jsfiddle preview , code illustration below).

try this: http://jsfiddle.net/km1hbpzv/1/ seek resizing browser see if effect want.

i worked off of html , css posted on pastebin, added in css original post , edited it.

my changes:

#newsposts { position: relative; bottom: 0px; top: -925px; width: 45%; //position: center; changed text-align: center (below) text-align: center; margin: 0 auto; //font-size: 20px; changed 2vw percentage of viewport width font-size: 2vw; margin-left: 10; margin-right: 10; text-indent: 5; } #dateandby { position: relative; bottom: 0px; top: -930px; //font-size: 30px; changed 3vw percentage of viewport width font-size: 3vw; margin-left: 10; margin-right: 10; text-indent: 5; }

there may structural problems html create later styling changes harder implement, seems work @ moment based on info collect post.

further give-and-take related vw units , other font-size practices may found here: pure css create font-size responsive based on dynamic amount of characters

html css