V-align Rows


#1

I’d like the non-uniform sized cover images to all align along the bottom of the row on this page: http://www.leadingwithideas.com/?page_id=656

Thanks in advance!


#2

Yeah, I have no idea what you’re asking :slight_smile:


#3

haha … sorry about that. Let me try to be more clear.

On my Library page (http://www.leadingwithideas.com/?page_id=656), the 5th and 6th rows of book covers each have one book that is a short square shape rather than the normal book covers. These titles (“Steal Like an Artist” and “The Art of War Visualized” are aligned at the top of the row; I would prefer they be v-aligned along the bottom of the row instead.

Does that clarify what I’m asking?


#4

Try this out:


@media only screen and (min-width: 1024px) {
  .page-id-656 .panel-row-style {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: baseline;
  }
}

Make sure you check if anything looks weird on that specific page after that.


#5

Thanks for the quick response.

That appears to have worked. One side effect, though: it removed the center alignment of the top elements (Mark Twain quote and the page title) – now they’re left aligned.


#6

Add this too and it should be okay:


#pg-656-0 .panel-row-style,
#pg-656-1 .panel-row-style {
     display: block;
}


#7

Perfect Vlad. Thanks so much.

(Seriously, your constant customer support is wonderful and truly appreciated. Do you have a tip jar so that users can show their gratitude?)


#8

Support is included with the theme. But if you want to send something to the person that handles your support queries you can just ask for his Paypal address. Except me :slight_smile:


#9

Well, since you handle nearly all of my queries, I’ll have to figure something else out. :slight_smile: