XF 2.2 How to move article preview footer to bottom of container

Van Lansberg

New member
I am looking for a way to move article preview footers to the bottoms of their respective containers so they line up neatly. By default the .message--articlePreview .articlePreview-footer element is located relative to the preview text. I would like to have it a few pixels from the bottom of the article preview container.

Whenever I use position=absolute and bottom=10, all footers are moved to the bottom of the page instead of to the bottom of their container. I am a CSS noob and any help is highly appreciated.
 
Solution
I think you'll likely have to set a height on the main content div.

Something like:
Less:
@media (min-width: @xf-responsiveMedium)
{
    .message--articlePreview .articlePreview-main
    {
        min-height: 100%;
        padding-bottom: 40px;
    }

    .message--articlePreview .articlePreview-footer
    {
        position: relative;
        bottom: 40px;
    }

    .message--articlePreview .articlePreview-content
    {
        margin-bottom: -40px;
    }
}

Brogan

XenForo moderator
Staff member
I think you'll likely have to set a height on the main content div.

Something like:
Less:
@media (min-width: @xf-responsiveMedium)
{
    .message--articlePreview .articlePreview-main
    {
        min-height: 100%;
        padding-bottom: 40px;
    }

    .message--articlePreview .articlePreview-footer
    {
        position: relative;
        bottom: 40px;
    }

    .message--articlePreview .articlePreview-content
    {
        margin-bottom: -40px;
    }
}
 
Solution

Van Lansberg

New member
So far, so good. Works (almost) like a charm. The only concern left now is that a few extra empty lines have been added between the preview text and "View full article". Any ideas on how to remove these? Or decrease the space the two elements back to the initial?
 

Brogan

XenForo moderator
Staff member
If you're interested, there's a uniform grid layout guide here.

 
Top