Page overview questions

[Sprony]

I need some help figuring out where I can change the overview of the news section of my website. As mentioned earlier, someone bailed on me while in the middle of finishing the old theme and based on how the new theme looks, I assume it has got to do with whatever he did. This is the top of my news page:

Then when you scroll down, it looks like this:

I want the entire page to look like the latter with fixed thumbnail sizes (or at least something I can work with since they're now all messed up). Where do I start?

 

[Russ]

This is how XenForo displays it by default, actually.
Look at the HYS forum:

Have you seen...?

This forum spotlights some of XenForo's interesting features. Spotlights on features in upcoming releases will be posted here.

xenforo.com

Here is a resource which has CSS to change the format to how you want

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

 

[Sprony]

This is how XenForo displays it by default, actually.
Look at the HYS forum:

Have you seen...?

This forum spotlights some of XenForo's interesting features. Spotlights on features in upcoming releases will be posted here.

xenforo.com

Here is a resource which has CSS to change the format to how you want

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

Perfect, thank you! I almost got it completely sorted, but only one part keeps messing up. I'm using the code of Equal Grid - Fixed Footer to the letter.

 

[Russ]

Looks like the fix was in the comments. The resource needs an update:

Add this into the code, just below the articleFooter bit:

    .block--previews .block-body>.message--articlePreview:first-of-type .articlePreview-image {
        height: auto;
    }

 

[Sprony]

Looks like the fix was in the comments. The resource needs an update:

Add this into the code, just below the articleFooter bit:

    .block--previews .block-body>.message--articlePreview:first-of-type .articlePreview-image {
        height: auto;
    }

View attachment 15166

Sorry Russ, I was unaware I was looking at reviews instead of comments. The code helped, but there's still one post that doesn't want to play nice. I've asked them if they know what might be up.

 

[Russ]

Which one isn't playing nice?

 

[Sprony]

Which one isn't playing nice?

This one:

I also noticed the Quake 3 Urban Jam Release not lining up but that mught be because the title is shorter, so that's another problem I suppose. I had some back and forth in the topic you linked and in the end I got this advice:

Code:
.message--articlePreview .articlePreview-image&gt;img {<br> aspect-ratio: 5 / 3;<br>}

or

Code:
.message--articlePreview .articlePreview-image&gt;img {<br> aspect-ratio: 4 / 3 !important;<br>}

I've tried it, but I'm unsure where to put this and while experimenting the results were unsuccessful so far.

 

[Russ]

Looking at it, seems like you got it sorted out? They all appear to be displaying the same for me.

 

[Russ]

Actually just noticed the Urban Jam... I guess something like this might help?

.articlePreview-headline {
    flex-grow: 1;
}

Place it into the media query.

 

[Sprony]

Actually just noticed the Urban Jam... I guess something like this might help?

.articlePreview-headline {
    flex-grow: 1;
}

Place it into the media query.

Yeah, that works, only it does cause this, so it probably needs one last tweak.

 

[Russ]

For some reason there-s a margin-bottom: -40px on the content.

.message--articlePreview .articlePreview-content {
    margin-bottom: -20px !important;
}

Try this out.

 

[Sprony]

For some reason there-s a margin-bottom: -40px on the content.

.message--articlePreview .articlePreview-content {
    margin-bottom: -20px !important;
}

Try this out.

I now get this:

Looks like everything aligns now, except for the body text. Maybe I messed something up in the code with all these changes. Here's the whole thing as it is now:

@media (min-width: @xf-responsiveMedium)
{
@__ctaArticleFooter: 40px;

.block--previews .block-body>.message--articlePreview:first-of-type .articlePreview-image {
height: auto;
}

.articlePreview-headline {
flex-grow: 1;
}

.block.block--articles.block--previews .block-body .message--articlePreview
{
margin-top: 0;

&:nth-of-type
{
grid-area: unset;

& .articlePreview
{
&-main
{
flex-direction: column;
min-height: 100%;
padding-bottom: @__ctaArticleFooter;
}

&-image
{
width: 100%;
}

&-title
{
font-size: @xf-fontSizeLarger;
}

&-content
{
margin-bottom: -@__ctaArticleFooter;
}

&-footer
{
position: relative;
bottom: @__ctaArticleFooter;
}

&-meta
{
border-top: solid 1px @xf-borderColor;

& .articlePreview-by
{
display: none;
}
}
}
}
}
}

.message--articlePreview .articlePreview-image+.articlePreview-text .bbWrapper:after
{
background: none;
}

.message--articlePreview .articlePreview-image>img {
aspect-ratio: 4 / 3 !important;
}

.message--articlePreview .articlePreview-content {
margin-bottom: -20px !important;
}

 

[Russ]

Would you prefer it like this?

 

[Sprony]

Would you prefer it like this?
View attachment 15178

Yes, that's exactly what I want!

 

[Russ]

Yes, that's exactly what I want!

Change:

    .articlePreview-headline{
        flex-grow: 1;
    }

To :

    .articlePreview-content {
        flex-grow: 1;
    }

Then add:

.articlePreview-headline {
    min-height: 50px;
}

See how that goes for you.

 

[Sprony]

Change:

    .articlePreview-headline{
        flex-grow: 1;
    }

To :

    .articlePreview-content {
        flex-grow: 1;
    }

Then add:

.articlePreview-headline {
    min-height: 50px;
}

See how that goes for you.

Perfection! Thank you so much!