Skip navigation
LarkinAngel
Currently Being Moderated

Gallery created with ul in fluid grid layout

Apr 30, 2013 6:16 PM

Tags: #image #html #css #layout #html5 #cs6

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?

 
Replies
  • Currently Being Moderated
    Apr 30, 2013 6:25 PM   in reply to LarkinAngel
     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2013 11:00 AM   in reply to LarkinAngel

    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.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2013 12:04 PM   in reply to LarkinAngel

    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.

    http://alt-web.com/FluidGrid/Fluid2.html

     

    For better answers to layout questions, we must see a live link.  Anything less is just guesswork.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2013 2:19 PM   in reply to LarkinAngel

    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. 

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2013 4:23 PM   in reply to LarkinAngel

    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.

     

    EXAMPLE. http://alt-web.com/FluidGrid/Fluid3.html

    My images are quite a bit smaller than yours, but you get the idea.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points