Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #1077800

    When I try to display blog posts in Masonry, first item is slightly offset to the bottom. This is the element that seems to cause it

    <div class=”av-masonry-entry isotope-item av-masonry-item-no-image av-masonry-item-loaded” style=”position: absolute; left: 0%; top: 0px; padding:0!important;”></div>

    It has padding computed at: 0 7px 7px 0 which causes the problem.

    How to fix this? Thanks.

    #1078382

    Hey MORTULGAAH,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #1078610

    I pasted the link to private content.

    #1078844

    Hi MORTULGAAH,

    Best regards,
    Victoria

    #1079023

    Well, you click “Continue”… That is temp link generator.
    It will load the site, here is the screenshot. Direct link in priv.

    Didn’t manage to solve this thru CSS, here is screenshot.

    #1079607

    Hi MORTULGAAH,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    .avia_desktop.avia_transform3d .av-masonry-animation-active .av-masonry-entry.post-211 {
        top: 0 !important;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1079688

    I added it to both quick css and custom.css but it didn’t work?

    I tried setting the masonry to three columns, but the same issue is happening.

    #1080234

    I found that somewhere in the code top 7px is added to the code of masonry items in the left column. First one is offset from top +7px, and the second one has position that is +7 pixels.

    I even tried testing with 4 of the same images, and the result is the same:

    https://pasteboard.co/I662Gsm.png

    I had to target two images directly to order-align the gallery:

    #av-masonry-1-item-361 {top:0!important;}
    #av-masonry-1-item-363 {top:322px!important;}

    Do you happen to have an update to this?

    Other thing I noticed is that the last image is put on the first place: https://pasteboard.co/I661Men.png

    • This reply was modified 5 years, 9 months ago by MORTULGAAH.
    #1080239

    Hi MORTULGAAH,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Victoria

    #1080973

    Thanks a lot for your help. I don’t even consider other themes then Enfold and/or other Kriesi stuff. You guys are great!

    I aded login data to private.

    #1082272

    Hi,
    Sorry for the late reply, I have read back through your posts and I believe that I understand and I will try to help.
    So on the page in the Private Content area, I see the first item has the “top” position of 7px.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (min-width: 767px) { 
    #top.page-id-21 .av-masonry .isotope a#av-masonry-1-item-211 {
    top: 0 !important; 
    }
    }
    @media only screen and (min-width: 481px) and (max-width: 766px) { 
    #top.page-id-21 .av-masonry .isotope a#av-masonry-1-item-276 {
    top: 0 !important; 
    }
    }
    

    Best regards,
    Mike

    #1082631

    Thanks. Is there a way to target any post universally? This CSS does work (check the link), however when you add another post the same thing happens.
    I tried targeting only a before the #, but that doesn’t work.

    What is the function of the first isotope div?
    <div class=’av-masonry-entry isotope-item av-masonry-item-no-image ‘></div>
    That one sems to add the gap, but I can’t get rid of it thru CSS, as the heights are calculated in a (very) weird way.

    I tried targeting first of type
    .av-masonry-container a:first-child {
    top: 0 !important;
    }

    And that “works”, but visually it doesn’t target the first post, but the second… Which is double weird, because the latest post is not the latest. Triple weird is that in code the correct post is first.

    If I use .av-masonry-container a:nth-of-type(2n) {
    top: 0px!important;
    }

    It works, but it is wrong. – Wrong post at the first position.

    *I commented out changes, so you can test.

    Thanks.

    #1082961

    Hi,
    This seems to be working:

    @media only screen and (min-width: 767px) { 
    #top.page-id-21 .av-masonry .isotope a.av-masonry-entry:nth-child(5)  {
    top: 0 !important; 
    }
    }

    Best regards,
    Mike

    #1086257

    Thanks. I finally tested this, and it seems it works. Will this fix work permanently?

    #1086316

    Hi,
    This should, unless you change the elements on the page.
    If you do we will be happy to assist again.

    Best regards,
    Mike

    #1230583

    hello, I have the same problem at https://florale-extase.nl/
    only the paddingtopis 60px;

    In the CSS I added
    .av-masonry-entry.av-masonry-item-no-image.av-masonry-item-loaded{
    padding:0!important;
    }

    unfornately this only works when you resize the window. Initially it keeps 60px;

    #1230920

    Hi,
    Thanks for the link, so as I understand you would like to remove the extra space in the orange section above and below the masonry images for mobile. Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
    #mobiel {
    	top: -40px;
    }
    #planten > div > div {
    	padding-bottom: 0px !important;
    }
    #planten .avia-builder-el-7 {
    	margin: 0 !important;
    }
    #planten .hr-invisible.avia-builder-el-11 {
    	display: none !important;
    }
    }

    Then clear your browser cache and check.

    Best regards,
    Mike

    #1231079

    Hi Mike

    Thanks for the reply. I do not want to remove the top padding above and below the whole section.

    I want to remove te extra padding (60px) of the first top-left image in the masonry. This is not aligned horizontally with the others on the same row. When you resize the window (to any size) my fix works : all top images are aligned. This is how the images should be aligned when the website loads

    Possibly this is caused by the first div with classes “isotope-item av-masonry-item-no-image av-masonry-item-loaded” This had the height of 60px (caused by the padding)

    How can this be solved?

    Thanks in advance

    Best regards
    Sheila

    #1231500

    Hi,
    Sorry for the late reply, thank you for the feedback I had been looking at the mobile version of your site. I compared your page to a masonry gallery on a new install and found that the first div av-masonry-item-no-image has no padding and all items line up correctly, so I found the cause for the padding in your css:

    .av-masonry-entry {
        padding: 30px !important;
    }

    I assume you added this to have a larger gap, please try replacing it with this css to add the padding to the items with images and not the first one with no image:

    .av-masonry-entry.av-masonry-item-with-image {
        padding: 30px !important;
    }

    you can also remove your other css because the first item will not have padding to remove.
    Then clear your browser cache and check.

    Best regards,
    Mike

    #1241422

    @Mike Thank you for the support! This is the solution.
    Best regards, Sheila

    #1241423

    Hi Sheila,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Possible bug; first entry in masonry posts displays 7px padding’ is closed to new replies.