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

Posted by Joe Li
Joe Li
3,608 Points

Px to ems

Hi

I've converted all of my text to ems but when I scale the screen down the text doesn't scale with it and overflows out of the parent div? Does anyone know why?

Thanks,

Joe

8 Answers

John Locke
John Locke
15,479 Points

Joe:

A couple things I noticed right off. You have a container element with a font-size of 2em, then an H1 inside of that with a font-size of 3em. Both of those with an !important tag, which you should really never use.

When you add 3em to 2em, you are making it 6em. That's besides the point.

grid_6 is wirtten as gris_6 - so make sure those things are correct.

If you add { width: auto; } to your containing element, it should adjust to contain the text.

Hope these things point you closer to the right direction.

izelnakri
izelnakri
25,803 Points
izelnakri
izelnakri
25,803 Points

Because in that case your context is the parent div not the page itself. I suggest you to watch Build a Responsive Website Project Course

Joe Li
Joe Li
3,608 Points
Joe Li
Joe Li
3,608 Points

Hi yeah I've seen the video many times. The parent container is in %s and the don't-size in ems.

izelnakri
izelnakri
25,803 Points
izelnakri
izelnakri
25,803 Points

If you can put the markup on codePen then maybe I can help.

Joe Li
Joe Li
3,608 Points
Joe Li
Joe Li
3,608 Points

Hey Izel,

This is my first time using code pen so i can't include my grid.css/normalize.css and other external files. The ribbon you see is the correct width but because of there is no grid.css the body is not the right width.

http://codepen.io/joeli89/pen/LzIHb

Thanks,

Joe

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Joe - In codepen to add external CSS files, click on the gear icon in the CSS section.

Joe Li
Joe Li
3,608 Points
Joe Li
Joe Li
3,608 Points

Hi John,

Thanks for your advice. I tried adding { width: auto; } to the containing div and I also tried { width: auto; } to the parent div's with the text inside but the text still overflowed out of the parent div when I downsized the browser screen. I know I can reduce the size of the text for it to fit on the smallest screens but i'd really like to have the text fill up as much of the parent div as possible and scale up and down when the screen size changes?? I've even tried vw,vh,vmin,vmax etc. but no luck!

Thanks,

Joe

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

You're going to have to adjust the .ribbon { width: } and font-size on your h1 as the size scales down. You have to add media queries, test, and adjust.