Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • March 29, 2026 at 9:40 pm #1496422
    Munford

    hi
    I am using the 1 column side by side portfolio grid to display a music program.
    I would like to make a gap between the portfolio items.
    I found the code:
    @media only screen and (max-width: 767px) {
    .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 0px;
    margin-bottom: 20px;
    width: 100%;
    }
    }
    It seems to work – is that correct?

    thanks
    Nancy

    • This topic was modified 3 weeks, 2 days ago by Munford.
    • This topic was modified 3 weeks, 2 days ago by Munford.
    • This topic was modified 3 weeks, 2 days ago by Munford.
    March 30, 2026 at 4:50 am #1496428
    Ismael

    Hey Munford,

    Thank you for the inquiry.

    The code you found is too general and will likely affect other elements on the page, not just the portfolio grid.

    A cleaner approach is to add a custom css class to your portfolio element and target that instead. You can do this by opening the portfolio element in the layout builder, go to the “Advanced” tab and add a custom class name there (e.g., av-music-portfolio). Then add your spacing rule to Enfold > General Styling > Quick CSS:

    
#top .av-music-portfolio .isotope-item {
    margin-bottom: 20px;
}

    This way the rule only applies to that specific portfolio and nothing else on the site.

    For more details on adding custom css classes in Enfold, please refer to the documentation:

    — https://kriesi.at/documentation/enfold/add-custom-css/

    Let us know if the issue persists.

    Best regards,
    Ismael

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