Mike Waller
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
ASKER
Thanks!
ASKER