If you're like most people you probably go through themes like you go through shirts. You find a theme you like, customize it and happily use it until you see something else you prefer and repeat the process all over again. While there is nothing wrong with this you may run into a little snag now and then.
Let's assume you used Theme A which had a content width of 500px. Let us also assume after having used this theme for some time you uploaded numerous photographs to use with your posts. It's a safe bet at least some of those photos were uploaded to make maximum use of the content area. In other words, some of the photos were inserted into posts at the full size of 500px wide. Now let's say you have found a new theme you want to try out, we'll call it Theme B. You upload and activate Theme B then browse around a little checking things out. Everything looks great until you find one of those posts with the 500px wide photograph which completely borks your new layout. It is then you find out that the content width of your new theme is only 350px wide. What to do?
If you're keen on keeping Theme B one option is to go through all of your large photos resizing each one so that they fit in nicely. You don't like that option? Neither do I. Fortunately there is a much simpler alternative. Open up your new theme's style sheet and add the following declaration ...
.post img {
max-width: 350px;
height: auto;
}
This will ensure any photographs used in your posts will not exceed a width of 350px. Of course you can adjust this to whatever you want according to your theme's particular dimensions. In the above example I used the DIV CLASS .post but you'll want to use whatever DIV CLASS or DIV ID your theme uses for the content area. Unfortunately there is a caveat - this will only work with modern browsers that support the max-width declaration.
About Len Kutchma
