• Resolved Ethan Harris

    (@ethan11698)


    Could someone please provide me with some CSS which would vertically align the posts so the ‘View here’ buttons align and the containers are the same height? I have tried various methods but do not know how to fix this. Thanks.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • .mkdf-blog-list-holder .mkdf-blog-list {
        position: relative;
        width: 100%;
        vertical-align: middle;
        list-style: none;
        margin: 0;
        padding: 0;
    	display: flex;
        flex-wrap: wrap;
    }
    .mkdf-blog-list-holder .mkdf-bli-inner {
        position: relative;
        display: inline-block;
        width: 100%;
        vertical-align: middle;
        height: 100%;
    }
    .mkdf-blog-list-holder .mkdf-bli-content {
        position: static;
        display: inline-block;
        width: 100%;
        vertical-align: middle;
        box-sizing: border-box;
    }
    .mkdf-blog-list-holder .mkdf-post-read-more-button {
        position: absolute;
        display: inline-block;
        width: 100%;
        vertical-align: middle;
        margin: 0;
        bottom: 0;
        left: 0;
    }
    .mkdf-blog-list-holder .mkdf-bli-inner {
        position: relative;
        display: inline-block;
        width: 100%;
        vertical-align: middle;
        height: 100%;
        padding: 0 0 30px;
    }
    .mkdf-normal-space .mkdf-outer-space .mkdf-item-space {
        padding: 0 15px 40px;
        margin: 0 0 30px;
    }

    might not be totally correct due to your classes but that’s basically how to do it.

    Make your list flex and flex-wrap
    make the inner div 100% height
    make the div wrapping the button position static
    make the button absolute
    add bottom padding to the containers so the button never overlaps content

    Thread Starter Ethan Harris

    (@ethan11698)

    Hi thanks so much, that worked, the issue is fixed across all pages!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS Fix to Vertically Align Columns’ is closed to new replies.