Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • March 12, 2019 at 12:23 pm #1077800
    MORTULGAAH

    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.

    March 13, 2019 at 8:16 pm #1078382
    Victoria

    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

    March 14, 2019 at 9:39 am #1078610
    MORTULGAAH

    I pasted the link to private content.

    March 14, 2019 at 8:12 pm #1078844
    Victoria

    Hi MORTULGAAH,

    Best regards,
    Victoria

    March 15, 2019 at 8:00 am #1079023
    MORTULGAAH

    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.

    March 17, 2019 at 3:56 pm #1079607
    Victoria

    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

    March 17, 2019 at 6:54 pm #1079688
    MORTULGAAH

    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.

    March 19, 2019 at 7:41 am #1080234
    MORTULGAAH

    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, 8 months ago by MORTULGAAH.
    March 19, 2019 at 8:07 am #1080239
    Victoria

    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

    March 20, 2019 at 7:19 pm #1080973
    MORTULGAAH

    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.

    March 24, 2019 at 6:04 pm #1082272
    Mike

    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

    March 25, 2019 at 12:39 pm #1082631
    MORTULGAAH

    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.

    March 26, 2019 at 4:37 am #1082961
    Mike

    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

    April 2, 2019 at 9:38 pm #1086257
    MORTULGAAH

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

    April 3, 2019 at 4:16 am #1086316
    Mike

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

    Best regards,
    Mike

    July 15, 2020 at 12:38 pm #1230583
    presta0

    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;

    July 16, 2020 at 1:52 pm #1230920
    Mike

    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

    July 17, 2020 at 4:57 am #1231079
    presta0

    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

    July 19, 2020 at 1:49 am #1231500
    Mike

    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

    August 28, 2020 at 7:44 am #1241422
    presta0

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

    August 28, 2020 at 7:47 am #1241423
    Nikko

    Hi Sheila,

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

    Best regards,
    Nikko

  • Author
    Posts
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.