Help!

Or search support forum

What's Global Moxie?

Global Moxie is the hypertext laboratory of Josh Clark, a designer, developer, and author who offers workshops and consulting for iPhone app design. He’s also creator of Big Medium, a web content management system. Josh spins words and code from multimedia studios in Providence, RI, and Paris, France.

What's Big Medium?

Big Medium is flexible, easy-to-use server software for creating and editing websites directly from your browser. Check out the features or download now.

On Shelves

Books by Josh Clark

Tapworthy: Designing Great iPhone Apps

Best iPhone Apps: The Guide for Discriminating Downloaders

iWork ’09: The Mising Manual

Moxiemail

Enter your e-mail to receive occasional updates:

Why do images have extra white space and/or captions that extend beyond the image?

The amount of space that images take on a page is controlled by the site’s HTML preferences (“Settings>HTML Preferences”). For example, images that appear within a page’s body text, are set by the “Page Image Size” setting in the “Images” preference screen. The default size for images on content pages is 200x200, which defines the maximum width and maximum height of images to be displayed.

Big Medium always carves out the maximum width for these images, no matter what the actual width of the image may be. So, for the default size of 200x200, the width of the slot where images are placed is always 200 pixels. If the image is less than 200 pixels wide (if the image is small, or if it has a vertical orientation), then there will be extra horizontal space, and captions could extend beyond the width of the image.

Admittedly, this is not ideal. One thing that you can do to make it to look better is to add a border and/or background-style to the image/caption box in the theme style. This helps contain the image and caption into a uniform box that makes the extra white space and caption misalignment less glaring.

To add a border and background image, add the following to your site’s theme style sheet (“Layout>Edit Theme Style Sheet”):

div.bmc_rightContentImage,
div.bmc_leftContentImage {
    border:1px solid #ccc;
    background-color:#eee;
}

You might also center the caption to make it look less off-kilter:

div.bmc_caption {
    text-align:center;
}

Finally, you can also change the image size that Big Medium uses in your pages (including adding your own custom image size). For details, see the “Image Management” chapter of the Big Medium 2 Guide.

Download Big Medium
Try it free for 30 days, or buy to unlock.

Superhero Software

"Dude, you're superman. By far the best product and best company I've ever dealt with hands down."
—Dave Cedrone

"Your system is so easy to run and modify. We're going to go live a week early, which never happens in this business."
—Mike McGann

"Man do I love this script. My entire site is now all Big Medium top-to-bottom. I have used many, many scripts in my time... This one has me hooked and is the best I have ever used for a news site. Josh, you're the man."
—Don McPartland

More praise for Big Medium