Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #815194

    Hello
    I’ve looked at a ton of other posts and can’t quite get this to work properly.

    I’m using a fullwidth 3 column masonry grid with a large gap. I’ve made the masonry background bright green to show the positioning, plus orange for the container, again to see how things are being displayed.

    I want to change the default 10px masonry that is green to 8px for the top and bottom (to match the 3 col grid I’m using above), and 0px left and right, and also fullwidth for the left and right 3 column images stretch right to full width to hide the green band at left, and the smaller bit of red band for the images on the right.

    I also tried making it a no gap masonry but couldn’t get each box to have a border of 8px for right and bottom, which I hoped could work because then the grid is fullwidth.

    Please advise; I’ve spent ages trying to get this to be full width and work – here’s some of my attempts! Thanks :)

    .main_color .av-masonry {
    background-color: #33cc00;
    /* margin-left: -10px; */
    }

    .av-masonry-entry .av-inner-masonry-content {
    background: rgba(255,255,255,0) !important;
    }

    .av-masonry-container {
    background-color: #ff3300;
    /* background-color: transparent;
    border-bottom: 8px #2ed900 solid !important;
    border-top: 8px #2ed900 solid !important; */
    }

    .av-masonry-entry:nth-child(1) {
    /* border-left: 18px #fff solid;
    border-right: 8px #fff solid; */
    }

    .av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
    /* margin-right: 8px;
    margin-bottom: 8px; */
    }

    #815501

    Hey webWahine,
    I couldn’t find a 3 column masonry grid on your site, please include a link to the page in question.

    Best regards,
    Mike

    #815590

    Sorry I forgot it is password protected.

    #815603

    Hi,
    Try this code in the General Styling > Quick CSS field:

    .av-large-gap.av-masonry {padding: 0 0 0 8px!important; }
    .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry {
        position: absolute;
        top: 0px!important; 
        left: 0px!important; 
        right: 8px!important; 
        bottom: 8px!important; 
    }

    Best regards,
    Mike

    #816022

    Thanks so much! :)

    Just one little tweak to make it perfect (remove the 8px left) –

    .av-large-gap.av-masonry {
    padding: 0 !important;
    }

    #816047

    Hi there!

    We’re glad that Mike was able to help you.

    Do you still need further help about this topic, or can we close this thread?

    Best regards,
    Sarah

    #816050

    I do have another question that is sort of related, but it’s a bit different so I’ll start a new thread :)

    #816057

    All right, please do! :) I’ll close this one, then. Thank you for using Enfold!

    Best regards,
    Sarah

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Change masonry grid gap size’ is closed to new replies.