vertically align images inside a div

hiya men in tights!

so - on this page: http://showtimeliving.co.za/furniture/
the client would like his furniture images to line up as if they're all standing on a fictitious floor.
So - by the bottom of the images, not the top.

I tried the following:
Stick the gallery inside a div.
Call the div "Furn" for furniture, so this doesn't fenaggle the rest of the site where floating things are good. :slight_smile:
Then -
in the custom css plugin, tell the site what to do with the furn div:

.furn {
vertical-align: bottom;
}

... but it's not doing what i was hoping it would do. :slight_smile:

Any ideas please folks?

  • Symi

    Whoaah Jude , thanks so much for coming to my rescue.
    :slight_smile:

    So - while we'd like the "furniture" to be standing on their feet, the rest of the site still needs to "float".

    I've tried to wrap the gallery in a div ID. :slight_smile:
    To confuse it into listening to me telling it that inside a .furn CSS ID, you GOTTA unfloat yourself.
    But i'm not winning....

    Here's what I got:

    Inside CSS:
    .furn {
    float: none !important;
    vertical-align: bottom !important;
    }

    and then inside the page's text version:
    <div id="furn">
    [gallery columns="4" type="thumbnails" ids="5654,5676,5684,5664,5673,5669,5685,5671,5701,5679,5688,5649"]
    </div>

    Then I thought maybe I can just clump the directions into the page in any event:

    <style>
    #furn {float: none !important;
    vertical-align: bottom !important;}
    </style>

    But nah - i'm not making any difference here!

    :slight_smile:

    how do I ONLY disengage the css for the gallery for THIS specific gallery, but leave it intact for the rest of the site?

  • Dimitris

    Hey there Symi,

    hope you're doing good and don't mind chiming in! :slight_smile:

    Could you please try another approach by using the following CSS snippet?
    This should resolve your issue, even though I noticed that some images have to re-cropped a little bit for a perfect alignment.

    #gallery-2 {
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    Reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.