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 !

  • 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)
      8 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? 

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

       

    • 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?