Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 29, 2024 at 11:47 pm #1463266
    richardwilding

    Dear Kriesi,

    How can I add spacing between columns in the Portfolio Grid, same as with the ‘large gap’ option in the Masonry Grid?

    See the first six items (Portfolio Grid with no gap) compared to the next six items (Masonry Grid with ‘large gap’) gap on the page below. I’d like the first set to have spacing like the second set.

    Thanks, Richard

    July 30, 2024 at 5:08 am #1463283
    Ismael

    Hey Richard,

    Thank you for the inquiry.

    Unfortunately, this is not possible because the positions of the portfolio grid items are calculated dynamically with a script. You can apply padding around the items to create space between them, but this will also affect the alignment of the grid container. If you want to test it, you can try this css code:

    #top .grid-entry.no_margin.av_one_third {
    padding: 10px;
}

    Best regards,
    Ismael

    July 30, 2024 at 5:10 am #1463284
    Ismael

    Hi,

    UPDATE: To fix the alignment of the grid container, please include this css code:

    .grid-sort-container {
    width: calc(100% + 10px);
    margin-left: -10px;
}

    Best regards,
    Ismael

    July 30, 2024 at 1:49 pm #1463322
    richardwilding

    Thanks Ismael, this works perfectly

    Very nice

    July 30, 2024 at 10:10 pm #1463380
    richardwilding

    Der Kriesi,

    I’ve noticed that although this css works very well with multiple columns, when the portfolio grid is displayed as a single column on mobiles, there is too much space on the right side of the page. See link below.

    How can this be fixed?

    Thanks, Richard

    July 31, 2024 at 7:07 am #1463399
    Ismael

    Hi,

    Thank you for the update.

    Please remove the previous modifications and replace them with the following code:

    @media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
  #top .grid-entry.no_margin.av_one_third {
    padding: 10px;
  }

  .grid-sort-container {
    width: calc(100% + 10px);
    margin-left: -10px;
  }
}

    This should ensure that the padding is only applied on on larger screens.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.