- This topic has 14 replies, 2 voices, and was last updated 1 year, 7 months ago by Ying.
-
AuthorPosts
-
August 23, 2022 at 1:33 pm #2321687Ian
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.
August 23, 2022 at 1:37 pm #2321693YingStaffCustomer SupportHi there,
Can you point us to a specific section of the archive so we know what template you are talking about?
August 23, 2022 at 2:13 pm #2321721IanI have provided the appropriate links. Thanks Ying!
August 23, 2022 at 2:14 pm #2321722IanThe Query loop one, it’s actually trying to align the bottom Author + Date to the bottom of Loop container. Thank you!!!
August 23, 2022 at 2:32 pm #2321726YingStaffCustomer SupportFor 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)?
August 23, 2022 at 2:51 pm #2321728IanThx 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!
August 23, 2022 at 3:03 pm #2321734YingStaffCustomer SupportDid 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.
August 23, 2022 at 3:07 pm #2321738IanHi 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!!
August 23, 2022 at 3:15 pm #2321750YingStaffCustomer SupportEh..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?
August 23, 2022 at 3:18 pm #2321752IanDoh! align-bottom was my css trying to make it work. Did not know we would use it. I have exited. Thank you!!!
August 23, 2022 at 3:35 pm #2321758YingStaffCustomer SupportYes π 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οΌ
August 23, 2022 at 4:29 pm #2321779IanThank 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!
August 23, 2022 at 4:35 pm #2321782YingStaffCustomer SupportGreat!
And sure, btw nice website π
August 23, 2022 at 5:21 pm #2321794IanThank you Ying, you are too kind! Did I mention you are awesome sauce? π Really always appreciate your help!
August 24, 2022 at 9:22 am #2322621YingStaffCustomer SupportGlad to hear that π
-
AuthorPosts
- You must be logged in to reply to this topic.