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

[Van Lansberg]

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.

 

[Paul B]

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

Something like:

@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;
    }
}

 

[Van Lansberg]

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?

 

[Paul B]

You can use the browser inspector (F12) to determine what additional CSS is required to style it to suit.

 

[Paul B]

Untested but this may work:

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

 

[Van Lansberg]

Tested and approved!

Makes me regret the years of struggle with that other forum software supplier .

Many thanks @Brogan.

 

[Paul B]

@Van Lansberg You may need to tweak the code slightly to add a media query to prevent it causing issues on the medium and narrow views.

I've updated the code in the post above: https://xenforo.com/community/threa...r-to-bottom-of-container.192313/#post-1505998

 

[Van Lansberg]

I always forget about the smaller screens. Hadn't tested it yet. Indeed there are some overlaps. Will update the code.

Thanks for getting back @Brogan. Highly appreciated.

 

[Paul B]

If you're interested, there's a uniform grid layout guide here.

Article Forum Symmetrical Grid Layout

In the default style, an article forum in preview mode has a layout of 1:2:2:4:4 in terms of the number of threads (articles) shown on each row, like so: This can be changed by adding some custom CSS to the extra.less template. Equal Grid -...

xenforo.com

 

[Van Lansberg]

I already changed that grid to 5 articles on every page.

 

[Kevin]

Something like:

Thanks, this is something I was after also.