Mister Muffin Blog

When I learned about css media queries from Debian Developer Vincent Bernat's blog I made a few changes to the css of this site as well.

I increased the content width from 600px to 700px and made use of this construct throughout the css:

media screen and (max-width: 700px) {#content {width:100%;}}

This piece will overwrite the width property of the content div from static 700px to variable 100% of the window size and by that consuming whatever the sub-700px-width screen size leaves for the main content. The positive effect of this measure is that on screens below a width of 700px, no horizontal scrolling will be needed to read the main content. It will be cramped in whatever is offered. This is of course most usable on mobile devices. Horizontal scrolling will only be needed to access the main menu. I could put the menu at the bottom but decided that scrolling sidewards will be less hassle than scrolling to the bottom of a page.

I not only changed the content width for screens below 700px width but also adapted margins and paddings from 1em to barely noticeable 1 pixel.

Try to resize your browser window to below 700px to see the effect - it's pretty nifty and works without any javascript on browsers that understand that css property.