Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1050365

    Hello, I tried to find solution in the forum but with no sucess.

    On our site we have problem to show properly 1px gap in Masonry gallery. It behave different in every browser. Please see pictures and our website.

    https://velore.sk/wp-content/uploads/2019/01/edge.png
    https://velore.sk/wp-content/uploads/2019/01/opera.png
    https://velore.sk/wp-content/uploads/2019/01/chorme.png

    Thank you with help.

    #1050407

    Hey morelon,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .main_color a.av-masonry-entry {
    border: 1px solid #e1e1e1 !important; 
    }

    Best regards,
    Mike

    #1050424

    Thanks, I used this CSS and I also set no gap in Masonry setings. Result is not ideal. See pictures. Can we improve this? :)

    https://velore.sk/wp-content/uploads/2019/01/opera2.png
    https://velore.sk/wp-content/uploads/2019/01/edge2.png

    #1050710

    Hi,
    The masonry elements calculate the width and height dynamically to the screen, if you try changing the window size you will see that the element floats. The difference shows more when the gap is 1px versus 5px or more, and is why by default it has a 15px margin instead of a border When you remove all borders, some will still show at certain sizes.
    Try removing the code above and using this instead, it seems a lot closer:

    #top .av-inner-masonry {
        border: 1px solid #e1e1e1 !important;
    }

    Best regards,
    Mike

    #1050815

    Hi Mike,

    it looks the same with both codes.
    One point, this code doesn’t work in custom css, only in quick css. Is that a problem?

    #1050892

    Hi,
    If you are using the performance settings to merge css & js, and you add css into the style.css directly, you will need to re-build the merged css by saving the theme options again. (clicking the big blue button “save all changes”) Sometimes this button is not available to click, so to force it, try adding a blank space in the Quick CSS, which will activate the button.
    As for the border try removing all of the border css and go to the Masonry gallery settings and choose “1 pixel gap” in the “Gap between elements” option.
    2019-01-07-074436

    Best regards,
    Mike

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