[Resolved] Custom Archive Template Equal Height

Home Forums Support [Resolved] Custom Archive Template Equal Height

Home Forums Support Custom Archive Template Equal Height

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #2321687
    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.

    #2321693
    Ying
    Staff
    Customer Support

    Hi there,

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

    #2321721
    Ian

    I have provided the appropriate links. Thanks Ying!

    #2321722
    Ian

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

    #2321726
    Ying
    Staff
    Customer Support

    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)?

    #2321728
    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!

    #2321734
    Ying
    Staff
    Customer Support

    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.

    #2321738
    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!!

    #2321750
    Ying
    Staff
    Customer Support

    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?

    #2321752
    Ian

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

    #2321758
    Ying
    Staff
    Customer Support

    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!

    #2321779
    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!

    #2321782
    Ying
    Staff
    Customer Support

    Great!

    And sure, btw nice website πŸ™‚

    #2321794
    Ian

    Thank you Ying, you are too kind! Did I mention you are awesome sauce? πŸ™‚ Really always appreciate your help!

    #2322621
    Ying
    Staff
    Customer Support

    Glad to hear that πŸ™‚

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.