Little question about responsive text.

[Roggers]

Hello guys!

I’m working on a whole new design for my personal website, and I thought that because I’m still fairly new to the web world (that is, not worked on any actual projects for other people) I’d try my hand at responsive design.
Now my site looks pretty good in most viewport sizes, however I’m having trouble getting my h1 (which is supposed to be 60px but using em’s i got it to 3.75 em’s it’s also placed onto an image using relative positioning) to resize with the browser.
as said above I used em’s for contextual sizes. I was under the impression that this would cause the text to resize, however it’s not.

I tried fittext, but it didn’t seem to work.

Has anyone got any idea how I should do it?

thanks.

[ChrisxClash]

Try adding these two rules:

html {

font-size: 10px;

}



body {

font-size: 67.5%;

}

Then, try using 6em for your h1 size.

[Roggers]

Thanks, but unfortunately it didn’t work. Would the only way around it, using css be media queries?

[ChrisxClash]

Yeah, that was my bad. All of this basically just gets the text to look the same in all browsers. I think media queries would be the best bet, but someone else may have a better solution.

[Roggers]

Alright thanks! There should really be a css property that can control that. percentages wouldn’t work right? although logically speaking, they should display to a certain percentage of the viewport, but they don’t right?

[ChrisxClash]

That’s what I figured would happen, but I don’t think they do in this case. I just attempted to size a div with %-sized font in it, and the font never changed sizes.

[jurotek]

@Roggers
as you mentioned, css media queries would be way to go

body {font: normal 100%/150% san-serif }

@media only screen and (max-width: “narrow”) {
body { font-size:80%;}
}

@media only screen and (max-width: “wide”) {
body { font-size:90%;}
}

@media only screen and (max-width: “wider”) {
body { font-size:100%;}
}

@media only screen and (max-width: “widest”) {
body { font-size:120%;}
}

Replace “narrow” “wide” “wider” “widest” with actual with and font size % to suite your needs.

[ChrisxClash]

Looks like juro already got all that out there for you. I threw together a codepen for another person if you wanted to see how it works.

link: http://codepen.io/chrisxclash/pen/sBxvF

[Author]

Posts