Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Frank Horbelt
Frank Horbelt
1,287 Points
Posted by Frank Horbelt
Frank Horbelt
1,287 Points

Font size appears to change with window size. Why?

At about 2:10 in this video, the instructor expands the browser and then shrinks it again. I couldn't help but notice that the font appeared to get smaller in a larger browser window and larger in a smaller window. Why is this?

2 Answers

Colby Work
Colby Work
20,422 Points
Colby Work
Colby Work
20,422 Points

media queries... it's a part of responsive design that allows changes to be made to your website from your CSS.

in the CSS file, you can change the sizes of fonts, or any css style by using a media query. for example:

html {
font-size: 12px;
}

then to change the font size when the browser width is 420px or less, you can write

@media screen and (max-width: 420px){
html{
font-size: 16px;
}

it's pretty cool, but if you are just starting out, don't worry too much about it, you will get to it eventually. that's just one example of many. let me know if you have anymore questions or need me to clarify anything.

Zhihao Wang
Zhihao Wang
9,687 Points
Zhihao Wang
Zhihao Wang
9,687 Points

Hello Frank,

What Colby said is correct, you can do it through media queries. However, there is a way to have typography respond to the browser size automatically, with the viewport properties.

Here's how it might work:

h1{
   font-size: 10vw;
}

This means that the h1 font width will always be 10% of the viewport width, the maximum vw you could set is of course 100.

This is just a really short example of how viewports work, you can read about it more here:

http://css-tricks.com/viewport-sized-typography/

NOTE

These viewport properties can be used for everything, not just exclusive for font-size. So if you are creating a responsive website, these might come in handy:

http://www.w3.org/TR/css3-values/#viewport-relative-lengths (A more comprehensive guide)

Cheers!

Colby Work
Colby Work
20,422 Points

how did you get your snippet to look like that? :P

Zhihao Wang
Zhihao Wang
9,687 Points
Zhihao Wang
Zhihao Wang
9,687 Points

using the three ``` marks to indicate the start of the code, and to have appropriate coloration add the name of the language such as html, css, js, etc. You would enter your code in there and then at the end of the code, end with the three marks, but without a declaration of what the file is this time.

Check the Markdown Cheatsheet (Found below the box where you would enter your response) where it will give you more information about implementing styles into your responses.

Cheers!

Colby Work
Colby Work
20,422 Points

yeah, that's what i did on mine and it came out funny. 3 tick marks, and adding css to it just made it output "css" lol

weird.

edit: i see i need to start on the code on a new line after the tick marks, now i feel stupid :P

thanks Z

Zhihao Wang
Zhihao Wang
9,687 Points
Zhihao Wang
Zhihao Wang
9,687 Points 
html {
font-size: 12px;
}

Hmm, works perfectly fine for me, make sure there is no space between the tickmark and the declaration, also make sure to enter your code on a separate line after you call up the code box.

Edit: No Problem!

Happy Coding!