Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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.

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

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

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

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

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>

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

eg. font-size: 1vw;