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? 

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