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
John Harles
20,614 Pointsmain heading takes up two lines instead of one
A few videos ago while learning about ems and rems, the font-size for the h1 element was changed to 5.625rem in the index.html. Since then the main header takes up two lines, not the one line it does on the video. Reducing the value of the font size to 4.625rem causes the main header to go back to taking up one line. However, since the project files use 5.625rem I continue to use 5.625rem also.
I'm using Firefox and windows 7 and the instructor is using Chrome.
Is this a browser issue and can anything be done to keep the h1 font size at 5.625rem as well as having h1 only take up one line.
Thanks
John Harles
20,614 PointsI'll post the code when after I learn how to use snapshot, which should be real soon.
thanks John
John Harles
20,614 PointsI'm using snapshot for the first time to post my code, so here goes.
I have two links in the first the one the h1 font size is set to 5.626rem and there is only one line in the main header. This was for css basics and pixel units.
The second link still has h1 font size set to 5.625rem but now the main header uses two lines.
#1 http://w.trhou.se/cddolkyfbf #2 http://w.trhou.se/w5b2o5h4nh
John Harles
20,614 PointsI found that text-transfer set to the value of uppercase causes the h1 header to go from one line to two. The two fixes (not problem solvers), are to reduce the value of h1's font size or to add the property letter-spacing and set its value to -7px. It brings back the h1 header to one line but the letters are a bit crowded. I think the best fix is to set the font size to a smaller value. But since my code works in another browser, my feeling is that it's a browser problem.
thanks for all you help John
2 Answers
Jovanny Elias
16,204 PointsHello, sorry for the long wait but I have not had a chance to sign on treehouse. I don't see any difference in both on my browser they are both in one line. The are different sizes but on the same line for me. It may be your browser try to delete your browsers cache/cookies sometimes it will save previous versions of your file in order to load them faster what happens is that when you update your file the browser will use the old file instead. Another thing that you can try is resetting your browsers settings maybe at one point the settings may have been changed. Try checking to see if you zoomed in the page that causes some viewing issues as well. If none of this helps I am not too sure as when I view them they are both on a single line.
John Harles
20,614 PointsI did some research and found out a few things. First using rems or ems doesn't help. I even tried using max-width in the h1 element, but that didn't work either. They're only two things that work. If I reduce the h1 font-size value to anything less that 4.950rem it back to being one line. I did notice that each time I increase the font-size the h1 heading gets wider and wider, until it exceeds the with of the screen and becomes two lines.
What I did find out was that if I changed the text-transform value to anything other than uppercase it back to being one line again.
So that where is stands for now.
I did think in the beginning that it might be a browser issue, and I'll go ahead and do some checking on that.
My code can be found here. http://w.trhou.se/jdhebvzw5p
Thanks John
Jovanny Elias
16,204 PointsRem is relative to your root font size so if that's differnet than what hey had on the video it will effect it. Your styling for the h1 may also effect it if you post your code we can help you out further in seeing what the issue maybe.
If you are unsure as to how to post code here take a look below. Otherwise disregard it.
If you are using workspace a new and easy way to show us your code is called snapshot. Follow this link to see how it works.
By posting your code correctly it will allow everyone on the forum to help you out faster and easier.
Ryan Roy
Courses Plus Student 3,586 PointsRyan Roy
Courses Plus Student 3,586 PointsIs it possible that your h1 has a display on it that is causing it to break ie inline or block? Or could it be related to the compounding nature of ems? (I realize you did say you were using rems however.) Can you show us your code?