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 col...
  • 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 !

miles's avatar
miles
Director

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);