Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

Nicolas FR

Well-known member
is it possible to make it 1:1:1:1?
This is exactly what the code in this resource does...

article-layout-grid-png.248588
 

Brogan

XenForo moderator
Staff member
Yes, it will be possible with custom less changes.

That's out of scope for this resource though.
 

1864com

Member
Is it possible to rewrite this code so it also applies to mobile display? I think 2 columns for mobile viewport are better.
 

Mendalla

Well-known member
Okay, did someone read my mind? I am working on a new article forum for my site that would benefit from this layout so was going to look for the resource. And, lo, I come in to find it in New Posts. :p
 

Brogan

XenForo moderator
Staff member
Is it possible to rewrite this code so it also applies to mobile display? I think 2 columns for mobile viewport are better.
You would use separate code for narrow viewports.

However, I think two columns wouldn't work well - everything would be cramped.
 

Mendalla

Well-known member
Just tried the new article forum on my site using my Galaxy S20 and it is two columns in landscape and one in portrait. Haven't actually tried on my tab yet (9.7").
 

XboxUnlimited

Active member
Do you think it would be possible to use this grid layout on a custom page node and display your own content, or is it tied to the article system only?
 

Brogan

XenForo moderator
Staff member
It's just CSS/Less.

You can inspect the templates and re-use it for your own purposes.
You will just need to change the class names, or use the same structure on your page node.
 

fionix

Active member
Is it possible to only show the articles like the first four grids on first page of an article node?

there are only 2 grid boxes side by side, so next line 2 grid boxes again and then it starts with the 4 boxes, I only want the 2 boxes if possible.
 

fionix

Active member
If I read it all correct, then the below code should get me a 2 grid row: - but it do the opposite, it shows 4 smaller grids in a row.

What am I doing wrong here?

Code:
.p-body-main:not(.p-body-main--withSidebar) .block--previews .block-body
{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "a a" "b_1 b_2" "b_3 b_4";
}


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

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

        &:nth-of-type(n)
        {
            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;
}
 
Top