Hacker News Reader

Comment by andrewmackenzie | Hacker News Reader

Ya, :fixed doesn't behave as intended there. I tried it out on a 15" MBP, 13" MBP, iPad, Cinema Display, and phones, so I've seen that it's pretty cramped. I'm not great at responsive design yet, but I'll mess with it. Any advice on getting the images and text to scale to smaller screens within their divs would be appreciated.

On that note, can't wait to see how Polygon.com is built.

View on HN

For images, you can specify either multiple file types (load different resolutions with media queries), or use .SVG graphics (support is spotty in older browsers). Here are two handy guides: http://bit.ly/LzRkfN and http://bit.ly/MH1bjq.

For text, it depends on which part. For body text (paragraphs), the easiest thing is to have a percentage based container and change font-sizes based on break points with media queries (e.g. at a screen with min-width of 768px, change font to this size). Headers are a bit different, you can follow the same approach as paragraph text or, use something like FitText (http://fittextjs.com/).

Love your work. Hit me up at me@ryanglover.net if you need code help.

Awesome, checking this out. Didn't know Smashing did a totally responsive redesign either. Thanks!

In which way is "position:fixed" not behaving as intended? Just curious because this seems to be the textbook use case for fixed positioning.

I am curious about this too. After disabling javascript and fiddling with this for about 1.5 minutes in Web Inspector I was able to get it to behave like the JS implementation reasonably reliably. It would only have required some CSS cleanup to move the icons etc. back into place properly.

Ah, I see. The problem is that I'm an idiot and was :fixing the wrong div. For some reason it was collapsing ingloriously upon itself. Must've been a 3 AM hackjob.

Also, I'm gonna shrink the header for all of the content pages. Good call.

Thanks again for the help and feedback!

Reply on news.ycombinator.com