[Resolved] Custom Archive Template Equal Height

[Ian]

I have tried a few variations to get flex to work properly but have not been able to. How do we make all custom archive templates equal height?

Staging URL provided.

[Ying]

Hi there,

Can you point us to a specific section of the archive so we know what template you are talking about?

[Ian]

I have provided the appropriate links. Thanks Ying!

[Ian]

The Query loop one, it’s actually trying to align the bottom Author + Date to the bottom of Loop container. Thank you!!!

[Ying]

For the Recent posts on the home page, you need to remove the align-bottom class from the container which contains the author and date.

Then add this CSS:

.gb-container.align-bottom > .gb-inside-container {
    justify-content: space-between;
    height: 100%;
    flex-direction: column;
    display: flex;
}

.gb-container.align-bottom > .gb-inside-container > *:last-child {
    margin-top: auto;
}

For the archive template, you are using a different structure, it’s more complicated, is it possible to change the structure to the same as the home page recent post (query loop)?

[Ian]

Thx Ying. I have added that CSS for the homepage query loop and still no change. Tried it in additional css and styles.css.

As for the archive template, I will work to make that happen. Then we can use the same code I assume to align the author and date to the bottom of equal heights?

So the loop seems to show equal heights. How do we flex the author and date to the bottom of that container? See Homepage loop. Thx!

[Ying]

Did you remove the align-bottom class from the parent container as well?

If so, the CSS is not targeting anything.

Then we can use the same code I assume to align the author and date to the bottom of equal heights?

Yes 🙂

How do we flex the author and date to the bottom of that container

Remove the bottom margin of the headline block which presents the author name and date.

[Ian]

Hi Ying, I just went through each element inside that section and made sure there is no more align-bottom. Did I miss anything? There is no caching in staging so not sure.

I have added your code above. Now how do we flex the author name and date to the bottom of the container? Thank you!!

[Ying]

Eh..you are not supposed to remove the align-bottom class from the parent container.

Can you exit the homepage editor so I can access it and take some screenshots for you?

[Ian]

Doh! align-bottom was my css trying to make it work. Did not know we would use it. I have exited. Thank you!!!

[Ying]

Yes 🙂 I saw you already using the align-bottom class, so I wrote my CSS based on that class.

Is it all good now?

Let me know！

[Ian]

Thank you! I have added in the align-bottom and things look great! As always appreciate it. Can you remove the link to the screencast above? Thanks!

[Ying]

Great!

And sure, btw nice website 🙂

[Ian]

Thank you Ying, you are too kind! Did I mention you are awesome sauce? 🙂 Really always appreciate your help!

[Ying]

Glad to hear that 🙂

[Author]

Posts