Link to home
Start Free TrialLog in
Avatar of Mike Waller
Mike WallerFlag for United States of America

asked on

Max-width on individual images in grid

on my page here, http://thecatholicalliance.org/leadership, using css I'm trying to get it so that each image has a max-width of 300px. Any ideas?
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Mike Waller

ASKER

Okay that worked but now there is padding showing up between the images. Any way to remove that but keep the content beneath each image to stay the way it looks. Any ideas?
Right- you're probably going to run into several problems, because you're starting to set some fixed widths on a dynamic layout.

Currently, each of your image containers is part of a grid and as you have 3 columns (depending on screen resolution), they're automatically set to a 33% width. Now that you want your images to be a maximum of 300px, they don't fit 'nicely' into the 33%. You could center the images within their own container, but you will always end up with some space, unless the container is exactly 900px wide (3 x 300px) - anything bigger than this will give you space - as soon as you go smaller, you drop down to 2 columns, so now you have to fill 50% of the container width - reduce your screen size down even smaller and you'll end up with 1 column so each image will try to fill 100% of the screen width.

This is the problem with trying to set fixed widths on responsive layouts - it just gets messy and kind of defeats the purpose of having a responsive layout.
Thanks!