I’m used to viewing websites on my laptop, so I haven’t really designed websites with large screens in mind. However, Chris has two 20″+ monitors, and he often has a lot of screen real estate that goes unused. He needed a theme for his blog, so I figured it was a good opportunity to experiment with a wide theme.
If I were really good, I’d make the dimensions resize with the browser. However, my idea for his theme involved background images, which IMHO don’t resize well (since the resizing is done on the client side by the browser, I believe). I prefer to make sites with fixed sizes whenever fixed background images (which I almost always use) are involved. If instead only CSS and tiled images were used, making the theme resize would be much simpler.
The wide theme was pretty straightforward; I encountered only one wide theme-specific problem. When the browser was resized to smaller than the width of the theme, the background image for the body tag shifted left of the page, so that the bottom of the page sometimes appeared displaced to the left. I fixed this by adding a wrapper div and placing the background image there instead of in body. I also set the the body CSS property display to table, which I thought had fixed the problem initially. So, two steps for the fix:
- avoid background images in
body - set CSS to
body {display: table;}