Forum Discussion

leogomes's avatar
leogomes
Ace
9 years ago

Masonry Message List - Number of columns

Hello,


I'm trying to use the standard Masonry Message List component, which by default comes with 4 columns.

 

 

 


I did a search and didn't found information on how to change to 3 columns. As you can see in the example below:

 

 

 

src: https://community.giffgaff.com/t5/Photography/bd-p/photo


I appreciate your help

 

Thank you,
Leandro

 

 

 

  • RaphaelB's avatar
    RaphaelB
    9 years ago

    Answering on behalf of vg

     

    Apparently, this lia-deckgrid angular component is taking the configuration via CSS.
    Therefore, even though the following CSS means absolutely nothing - it's basically injecting into the HTML source some text which is anyway hidden - it serves as a sort of parameter to set the number of columns at different breakpoints.

     

     

    /* Lithium: angular deckgrid from 4 to 3 columns */

    @include media(desktop) {

        .lia-deckgrid[deckgrid]::before {

            content: "3 .column.column-1-3";

        }

    }

     

    Hope this helps !

8 Replies

Sort By
  • RaphaelB's avatar
    RaphaelB
    Lithium Alumni (Retired)
    9 years ago

    Answering on behalf of vg

     

    Apparently, this lia-deckgrid angular component is taking the configuration via CSS.
    Therefore, even though the following CSS means absolutely nothing - it's basically injecting into the HTML source some text which is anyway hidden - it serves as a sort of parameter to set the number of columns at different breakpoints.

     

     

    /* Lithium: angular deckgrid from 4 to 3 columns */

    @include media(desktop) {

        .lia-deckgrid[deckgrid]::before {

            content: "3 .column.column-1-3";

        }

    }

     

    Hope this helps !

  • KaelaC's avatar
    KaelaC
    Lithium Alumni (Retired)
    9 years ago

    There is a cleaner way of doing this for responsive skins. In the base scss file there are these lines

     

    // Small layouts
@include masonry(phone-min, 1);

// Medium layouts
@include masonry(phone-to-tablet, 2);

// Large layouts
@include masonry(tablet-to-desktop, 3);

// X-large layouts
@include masonry(desktop-and-bigger, 4);

    to change to a 3 column layout for desktop (X-large) you only need to add this line to your style.scss file

     

    // X-large layouts
@include masonry(desktop-and-bigger, 3);

    and you are good to go!

  • miles's avatar
    miles
    Director
    8 years ago

    I've been trying to make this change to 3 wide masonry too, but can't get the skin to compile after. 

     

    I'm adding the below to my _style.scss in my responsive skin. I've also tried adding it to another file of customisation fixes we have imported into _style.scss. 

    // Large layouts
@media (min-width: $screen-lg) {
     .lia-deckgrid[deckgrid]::before {
      content: ‘3 .column';
     }
}

    Does anyone have any tips? 

  • ChiaraS's avatar
    ChiaraS
    Lithium Alumni (Retired)
    8 years ago

    miles did you try to second, clearer approach?

    @include masonry(tablet-to-desktop, 3);

     

  • miles's avatar
    miles
    Director
    8 years ago

    ChiaraS yes, sorry should have said. When I tried that it won't compile and says there is no mixin called masonry. I think we might be on an older version of media whereby this isn't recognised?

  • miles's avatar
    miles
    Director
    8 years ago

    ChiaraS sorry to bug, just wondered if you had any other ideas on this?

  • ChiaraS's avatar
    ChiaraS
    Lithium Alumni (Retired)
    8 years ago

    not really, sorry. It may be related to your community not being on the GA version of responsive, but not sure... vg any idea?

  • stephanTBE's avatar
    stephanTBE
    Guide
    6 years ago

    miles you've used the wrong apostrophe in your code, that's why it didn't compile. 

    ‘3 .column'

     

    try e.g.:

    @media (min-width: 320px) {
    .lia-deckgrid[deckgrid]::before {
        content: "1 .column.column-1-1" !important;
    }
}

@media (min-width: 768px) {
    .lia-deckgrid[deckgrid]::before {
        content: "2 .column.column-1-2" !important;
    }
}

@media (min-width: 1280px) {
    .lia-deckgrid[deckgrid]::before {
        content: "3 .column.column-1-3" !important;
    }
}