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

mateusz sawka
mateusz sawka
13,222 Points
Posted by mateusz sawka
mateusz sawka
13,222 Points

h1 font size adjutsment to 45% screen size

Hi,

I want to make the h1 text adjust automatically to let's say, 45% of the page width. There are no spaces in the text. Everything looks fine on a big screen, however, when I make it smaller, the text overrides menu on the right side.

How can I make the heading to have a relative font-size, so that it adjusts to the screen width?

6 Answers

Mireille Pasos
Mireille Pasos
35,469 Points

What about you try to wrap the h1 within a div, make that div's max-width 45% of the total width of your header and then use em for the font-size. Here I see you're using both things % and em as you said but remember the C in CSS means cascading, which means your site will take the last thing you gave it. I know I don't have your entire code, but it looks like you might be overriding the font-size.

lovell
lovell
7,882 Points
lovell
lovell
7,882 Points

Sounds like you could do with making the menu a % value aswell then :-)

Or use the em measurement. Eg font-size: 2em;

Mireille Pasos
Mireille Pasos
35,469 Points
Mireille Pasos
Mireille Pasos
35,469 Points

Hello, you can make any element be a percentage of its parent element. Or in this case you could use "em"s to make your font-size adjustable. Alternatively, you could use something like FlowType.js, here: http://simplefocus.com/flowtype/

Good luck!

mateusz sawka
mateusz sawka
13,222 Points
mateusz sawka
mateusz sawka
13,222 Points

Thank you for all the answers :) I will skip this issue for now though, because operating with max-width does not give me expected results - even after deleting all the other CSS. I guess vw will work better here as warren suggested

mateusz sawka
mateusz sawka
13,222 Points
mateusz sawka
mateusz sawka
13,222 Points

Thank you for the answers! I am using % and ems already, unfortunately I am still not getting what I want, and what I guess is possible. Thank you Mireille for sugessting FlowType, but I guess it will come later to my to-learn list, and as for now I have a feeling that I should be able to acheive it in a much easier way.

Let me show you what I get with full screen and reduced screen:

https://docs.google.com/drawings/d/1cFpCSN5-VETWiOFU4_kZkCmmmySgFIkG83pLJwF2OgQ/pub?w=1440&h=1080

What I want to acheive is to make the PanExcel.pl text [h1] in the picture to the right be no more than 45% of the window

The css code regarding h1 looks more or less like that now, I have tried many options and everyhing what I did gave such a result or made all worse.

h1, h2 { margin:15px 0; font-size:1.75em; font-weight:normal; font-family:'Roboto Slab', serif; color: #fff;}

h1 {font-size:6em;} h1 {max-width:45%; font-size:100% clear:both;}

And the html for header is <header> <a href="index.html" id ="logo"> <h1>PanExcel.pl</h1> <h2>Szkolenia dla manager贸w i finansist贸w</h2> </a> <nav> <ul> <li><a href="funkcje.html">Funkcje, kt贸re musisz zna膰</a></li> <li><a href="kursy.html">Kursy</a></li> <li><a href="oferta.html">Oferta</a></li> <li><a href="e-book">e-Book</a></li> <li><a href="about.html">O mnie</a></li> <li><a href="kontakt.html" >Kontakt</a></li> </ul> </nav> 

</header>
lovell
lovell
7,882 Points
lovell
lovell
7,882 Points

You header/ logo text hasn't changed size in the mobile view. Try using vw [viewport width].

eg. font-size: 1vw;