CODEWITHSUNDEEP
htmlcss
Jay Bot
Jay Bot

Reputation: 51

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

The text on my website will not re-size correctly when making the browser window smalller. it squashes the text in the middle and makes more lines. here is my code

My whole document

html: http://pastebin.com/kj1jvTjv css:http://pastebin.com/A1CP7Viq

HTML:

</div>
<div id="NewsPosts">
<p>Toontown Classic is 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; 
}

Upvotes: 1

Views: 1826

Answers (2)

Jordan Powell
Jordan Powell

Reputation: 320

I can't tell exactly how you want it to work from your question. If you want the font-size to dynamically change based on the view size of the browser, you could use vw units (see jsfiddle preview and code example below).

Try this: http://jsfiddle.net/km1hbpzv/1/ Try resizing the browser to see if that is the effect you want.

I worked off of the HTML and CSS you posted on Pastebin, but I added in the CSS from your original post and edited it.

My changes:

#NewsPosts {
   position: relative;
   bottom: 0px;
   top: -925px;
   width: 45%;
   //position: center; changed this to text-align: center (below)
   text-align: center;
   margin: 0 auto;
   //font-size: 20px; changed this to 2vw which is percentage of the 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 this to 3vw which is a percentage of viewport width
    font-size: 3vw;
    margin-left: 10; 
    margin-right: 10; 
    text-indent: 5; 
}

There may be structural problems with your HTML that make later styling changes harder to implement, but this seems to work at the moment based on the information I could collect from your post.

Further discussion related to vw units and other font-size practices may be found here: Pure CSS to make font-size responsive based on dynamic amount of characters

Upvotes: 1

GravityScore
GravityScore

Reputation: 307

center is not a valid value for position, so you can't do position: center;. If you want to center a div in a window, you can set the margin-left and margin-right property to auto. I see you do this with the line margin: 0 auto;, but then you override that two lines later with margin-left: 10; margin-right: 10;. 10 is also not a valid value for margin, it needs to be 10px or 10em or some value with a specifier after it. Also for something like this, position: relative is unnecessary, although depending on your other HTML elements, this might break something. So, use this CSS:

#NewsPosts {
    margin-left: auto;
    margin-right: auto;
    padding: 10px 15px;
    font-size: 20px;
    width: 45%;
}

Something like that should do what you want.

Upvotes: 0

Related Questions