Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 24, 2024 at 1:50 pm #1431899
    liesbethp1

    Hi all,

    I ve got a question regarding white spaces to create a more interesting view in my opinion.
    When creating a masonry gallery the top pictures all align on the first row. I would like some pictures to be lower and some stick out relative to the rest. Working with eg a top margin would probably push the first picture over the one below it and on a small screen, it would create empty space above the images, any ideas or tips? Thanks, Frank.

    I would like something like this.

    Second question, I was hoping the masonry gallery would have the option to create a template, so the settings like, link title showing on hoover, gallery 4 columns wide etc would be set in a template. When I however use the tab customize and save a customized setting, the settings don t seem to run on a new page. Is that not created for that purpose?

    • This topic was modified 10 months, 4 weeks ago by liesbethp1.
    January 25, 2024 at 6:52 am #1431958
    Ismael

    Hey liesbethp1,

    Thank you for the inquiry.

    1.) You can add this css code to adjust the margins around a specific masonry item.

    .av-masonry-container .av-masonry-entry:nth-child(2) {
  margin-top: 200px;
}

.av-masonry-container .av-masonry-entry:nth-child(4) {
  margin-top: 100px;
}

    The css code above should affect the first and third items in the gallery.

    2.) Have you tried creating a Custom Elements Template for a Masonry Gallery? Please check the link below for more info.

    // https://kriesi.at/documentation/enfold/custom-element-templates/

    Best regards,
    Ismael

    January 25, 2024 at 4:18 pm #1432043
    liesbethp1

    That works, thanks, only thing, it changes all the galleries, can i not target individual items?

    January 26, 2024 at 9:35 am #1432102
    Ismael

    Hi,

    Thank you for the update.

    You can apply a custom css class name or ID attribute to the Masonry element and adjust the css rule accordingly. Please check the link below.

    // https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

    Best regards,
    Ismael

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