I'm trying to create a gallery of images (all the same size) using Dreamweaver 6 and the fluid grid system. I'd like the images to size up and down with the browser window size as well as to go from 1 across in mobile size, and up to 4 across depending on the size of the window, all while mantaining even padding.
I have a div directly inside the .gridContainer clearfix div, but I can't get the images within to re-size. Is this because all fluid divs have to be directly in the .gridContainer clearfix? If so, is there a way around this?
I have a div directly inside the .gridContainer clearfix div, but I can't get the images within to re-size.
Remove the height and width attributes from your <img> HTML code. Then the images should be able to re-scale to device width. If they don't, you'll need to post the URL to your test page so we can see what else may be going on.
I didn't have any height and width attributes, but that got me thinking about the actual size of the images. They were 240px x 160px 300dpi. I just changed the size to 480 x 320 300dpi and they will scale down when I pull the window size in (past tablet size towards mobile), but only once they go to 1 column. At tablet size and above they display as full size images, regardless of browser window size. In a 1000 wide window I want 4 columns wide, and then as the window scales down, size the image until they reach a min width, then go to 3 columns until a min width, then go to 2 columns, etc...
As an example, this FluidGrid test page uses photos that are optimized for the web at 72dpi, 900 x 675px. When the page layout allows it, the images scale up to a max width of 900px (native image size). Each Photo is in its own division.
For better answers to layout questions, we must see a live link. Anything less is just guesswork.
Something's messed up. Lists inside <div class="border"> are not re-sizing down enough to fit inside mobile layouts. If I replace the the HTML lists/images with plain text, it re-sizes as expected.
I removed the #gallery styles from second-try.css and the images re-sized as expected. So your culprit is narrowed down to the #gallery css code.
Incidentally, I advise people to never tamper with the Boilerplate.css or FluidGrid.css code. It's much safer to put your content styles into a separate external stylesheet.
I've tried to replicate whatever you saw, removing #gallery styles from second_try, but saw no difference in the way the images sized. Then I went back to my html and took out "border" and re-activated #gallery styles and nothing changed except I lost my border.
I've had some time to think about this since I last posted, would it make more sense if I created the gallery effect I'm after with each image in their own div directly in .gridContainer? Then I could specify clearly that there would be 4 columns of images on the max screen, 3 on the tablet, 1 on the mobile...
By the way, never messed with the Boilerplate or FluidGrid css...that is one thing I do remember from the load of material I've tried digesting in the last week :-)
Thanks for the help!
Second-try.css = your FluidGrid.css I'm suggesting that you keep whatever you care to name your layout.css file separate from your content styles.
As far as putting images into their own divs, I don't think that's necessary. Heck, you don't really even need lists or paragrphs for this. Just insert images into the .border div and allow them to adjust to however many lines they require.
My images are quite a bit smaller than yours, but you get the idea.