Okay
  Public Ticket #2072644
Portfolio items
Closed

Comments

  • James started the conversation
    July 8, 2019 at 4:33am

    Currently the portfolio page has two columns of items is it possible to change that to have three or four columns?

  •  1,822
    Support replied
    July 8, 2019 at 6:35pm

    Hello James,

    you can customize the sizing of the packery masonry portfolio grid by opening /js/scripts.js

    and in function Portfolio(){ ... }

    you will have the grid initialization:

    var $container = $('#portfolio').packery({
         itemSelector: '.item',
         gutter:0,
        transitionDuration: "0.5s"
    });


    https://packery.metafizzy.co/options.html

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • James replied
    July 9, 2019 at 12:00am

    I have updated the /js/scripts.js file to be 

    var $container = $('#portfolio').packery({
     itemSelector: '.item',
     gutter:0, 
     percentPosition: true,
     columnWidth: 60,
     transitionDuration: "0.5s"
     });

    But no change has occurred, do I have to update CSS also?

  •  1,822
    Support replied
    July 9, 2019 at 6:03am

    Hi James,

    plz open /css/portfolio.css and look for

    .item {
        display: block;
        position: relative;
        box-sizing: border-box;
        z-index: 0;
        width: calc(50% - 40px);
        height: 28vw;
        margin: 50px 20px;
    }

    as I don't think you need styles for wide items


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • James replied
    July 9, 2019 at 6:14am

    This hasn't worked, could you please try it yourself and let me know the correct answer please.

  •  1,822
    Support replied
    July 9, 2019 at 2:34pm

    Hi James

    try modifying directly in /css/portfolio.css

    for 3 columns

    .item {

         ...

         width: calc(33.33% - 40px);

         height: 18vw;

        ...

    }

    for 4 columns

    .item {

       ...
        width: calc(25% - 40px);
        height: 14vw;

       ...
    }

    you may need to change the styles in responsive media breakpoints in the same file

    @media only screen and (max-width: 767px) {
...
}



    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • charles dyve replied
    December 10, 2019 at 11:35am

    hello, 

    I want 3 columns, so I followed your instruction: 

    I opened  : /css/portfolio.css

    and I changed with

    .grid-portfolio  .item {

         ...

         width: calc(33.33% - 40px);

         height: 18vw;

        ...

    }

    + 

    @media only screen and (max-width: 767px) {

    but still 2 column. can you help? 

  •  1,822
    Support replied
    December 10, 2019 at 4:58pm

    Hi, 

    we need to inspect the portfolio page, if possible

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • charles dyve replied
    December 11, 2019 at 5:12pm

    sorry, I did a mistake. I am using the theme munio and did this change which concern the template Satellite...

  •  1,822
    Support replied
    December 13, 2019 at 8:36am

    Ok, closing this ticket

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy