Hacker News new | ask | show | jobs
by juriga 5129 days ago
Here's a screenshot taken with the latest dev version of Chrome on Windows 7: http://i.imgur.com/aciAY.jpg

I assume the layout breaks on my setup because I have set the default browser font size to 18px and you're using em's (which are relative to the base font) to define all your font sizes.

Using relative font sizing isn't necessarily bad, but you should make sure that the whole layout is flexible enough. For example, you have set a static pixel height for the speech bubble and "full stack" containers. With a slightly different font setup that can cause the text to overflow (as can be seen in the screenshot above).

Great work this far, I'll bet you can make this a lot better by reading all the feedback in these comments.

2 comments

I assume the layout breaks on my setup because I have set the default browser font size to 18px

FWIW, that's the same problem I was seeing at the top, and I too have my default font size at 18px.

I also see areas overlapping badly alongside the full stack graphic, which apparently you don't in Chrome.

Yup, using ems for the body font is the problem here, rookie mistake for sure. Thanks for pointing it out, should be fixed now.