CSS3 Media Queries

Once again, I've redesigned my portfolio site. I'm really trying to get this thing as simple and easy to use as possible. Occam's razor all the way.

All black new look! I decided to do away with the diptych style and go just for a straight downward strip of images. My images are so dark that often time they meld into each other and the background(this really gives me quite a feeling of satisfaction). I changed my info box around too, and set it to show up when the little white triangle in the upper left corner is clicked.

The ajax links that control the photo series have been moved into a vertical list on the left. So on and so forth.

The really exciting bit that has been changed might not be immediately noticeable. I've decided to implement a feature that is new to CSS3 called media queries. This means that I can change different elements on the page depending on the size of the user's browser. Try it! There are a number of different steps, that trigger when the browser is between 1px-399px, 400px-799px, 800px-1200px, and 1200px-infinity. My hope is that this will allow all users to see the photos full frame, regardless of browser size. It can even be used to format the page for mobile users!

I'm kind of uncertain about the cross-browser compatibility here. Older versions of IE might not work with this since they don''t support a good deal of CSS3. If you do see any issues with it, I'd love to hear about them.

Web-designer wall has a really great demo and tutorial on how this works which you can find here.

Take 'er for a spin!