Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

Overview Updates (5) Reviews (4) Discussion
Blatchy said:
is it possible to make it 1:1:1:1?
Click to expand...
This is exactly what the code in this resource does...

article-layout-grid-png.248588
 
Yes, it will be possible with custom less changes.

That's out of scope for this resource though.
 
Is it possible to rewrite this code so it also applies to mobile display? I think 2 columns for mobile viewport are better.
 
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
 
1864com said:
Is it possible to rewrite this code so it also applies to mobile display? I think 2 columns for mobile viewport are better.
Click to expand...
You would use separate code for narrow viewports.

However, I think two columns wouldn't work well - everything would be cramped.
 
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").
 
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?
 
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.
 
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.
 
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;
}
 
You must log in or register to reply here.
Back
Top Bottom