Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 10, 2017 at 7:23 pm #837127
    bitojoe

    The masonry grid is adding 25px of top to the first item display.

    I would overwrite this with CSS and :first-child, but the order in which items are listed in the code differs from the order in which they appear.

    That being said, a jQuery solution like this works in the inspector: 

    jQuery('.av-masonry-entry').each(function(){
    if (jQuery(this).attr('style') == 'position: absolute; left: 0%; top: 25px;') { // .css('top'); could work as well
        jQuery(this).attr('style', 'position: absolute; left: 0%; top: 0;');
    }
});

    But I’d also need this code to fire every time the masonry items resort—but their top value isn’t always settled by the time this script would go.

    I’d rather just know why the masonry scripts or style are adding an unnecessary 25px of top on the item in the first position and just nip it in the bud, rather than try to override it later on.

    For what it’s worth, it doesn’t happen on mobile view.

    • This topic was modified 7 years, 3 months ago by bitojoe.
    August 14, 2017 at 11:04 pm #838989
    Jordan Shannon

    Hey bitojoe,

    CSS with :first-child should still work regardless of which order they are presented if it is only the first item that is always effected. Would this not solve your problem?

    Best regards,
    Jordan Shannon

    August 14, 2017 at 11:47 pm #839017
    bitojoe

    Hi Jordan, thanks for the response.

    I ended up trying to :first-child solution and it works for the most part… The only issue now is that the rest of the products slide to the left on page load.

    August 15, 2017 at 2:22 pm #839293
    Jordan Shannon

    Hi,

    This just occurs on the top row? Please share with me css you added?

    Best regards,
    Jordan Shannon

    August 15, 2017 at 4:44 pm #839399
    bitojoe

    .av-masonry-entry.isotope-item.av-masonry-item-no-image.all_sort.coffee_sort.subscription_sort.blank_sort.equipment_sort.wholesale-madcap_sort.apparel_sort.faded.av-masonry-item-loaded:first-child {
    display: none;
    }

    August 15, 2017 at 4:54 pm #839408
    Jordan Shannon

    Hi,

    Could you have just removed the 25px as opposed to display:none? I’m sure this is what has caused the shift. Was it a margin or padding or a 25px blank element?

    Best regards,
    Jordan Shannon

    August 15, 2017 at 5:01 pm #839413
    bitojoe

    Yes, I could have just removed the 25px but ideally, this shouldn’t even be showing in the markup at all as it doesn’t even hold an entry / product. So yes I could, but then the first spot would permanently be blank.

    http://madcap.wpengine.com/wp-content/uploads/2017/08/Screen-Shot-2017-08-15-at-10.58.18-AM.png (hosted on WPengine)

    August 15, 2017 at 5:15 pm #839422
    Jordan Shannon

    Hi,

    The it appears that the css you added through the entire grid off. There are quite a few empty spaces that I see. Could you remove the css for a bit so I can look into the issue?

    Best regards,
    Jordan Shannon

    August 15, 2017 at 7:16 pm #839524
    bitojoe

    The blanks on the rest of the pages are non-clickable products because that is the look they wanted – so the rest of the blanks are intentional but the first blank is not. We have devs working on the rest of the site right now and removing the css is not really a great solution at the moment.
    Could you instead open up the inspector in chrome, open up sources, and remove the styles in the browser if you’d like to test it?

    August 16, 2017 at 11:06 pm #840116
    Jordan Shannon

    Hi,

    Try the following within quick css:

    
#av-masonry-1-item-1066{
display:none!important;
}
#av-masonry-1-item-5113{
left:69%!important;
}
#av-masonry-1-item-5947{
left:35%!important;
}

    Best regards,
    Jordan Shannon

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