Improving the Jazz Calendar Site

Contact Us or call 1-877-932-8228
Improving the Jazz Calendar Site

Improving the Jazz Calendar Site

The updates to the Jazz Calendar site we made in the previous lesson took a static, fixed-width, pixel-based design and turned it into a more flexible, percentage-based page. But a quick examination of the page - especially when one resizes the browser smaller and smaller - shows that the design breaks down when the width of the browser becomes too small. The images, specifically, break the design: the guitar, sax, and other photos on the home page (associated with each gig listing) remain a fixed width and height and, as such, don't receive the same "resize to match the browser" behavior. This means that, at smaller widths, the images overlap the design:

screenshot of images too big

The solution to this is the magical CSS max-width:100%. First discovered by Richard Rutter, this CSS rule constrains images (and other elements, as we'll see) to a maximum width inherited by their containing element - that is 100% (and no more) than the element's parent.

Thus, a simple update to the CSS (see FlexibleImages/Demos/css/flexibleimages.css) for the Jazz Calendar page - specifically, for the images associated with each gig listing - offers the user a more graceful presentation when the browser window is less wide.

#main #maincontent .performance img { margin:0 0.9% 10px 0; max-width:100%; }

View FlexibleImages/Demos/flexibleimages.html in your browser to see the live page. Note that, as you size your browser narrowed, the gig images now get smaller to fit their container element:

screenshot: images shrink to fit space

Consider an interior page within the Jazz Calendar site - one with a large top photo. Without addressing the width of this photo, the design would break even more readily than would our home page - one need not resize the browser too small before the fixed width of the image pushes it into the sidebar:

Jazz Calendar screenshot - large image too wide

The addition of one CSS rule fixes this problem: our large top image shrinks appropriately as the browse window resizes. Check out FlexibleImages/Demos/interiorjazzpage.html and FlexibleImages/Demos/css/interiorjazzpage.css

#main #maincontent img.pagephoto {
	max-width:100%;
	margin-bottom:4%;
}

Note that the max-width:100% CSS rule applies for other fixed-width elements, such as video, besides images. We'll practice this in an upcoming exercise.

Next