Team Members – Rows overlap

  • Author
    Posts
  • #142554
    wnypa92
    Member

    Hi,

    After I’ve setup the team members (officers in my case); on the front page and on the team members page the rows do not display correctly upon first load. After refreshing the page the rows display as expected.

    Any thoughts on how to address this?

    See examples here: https://imgur.com/a/6czmI4u

    Thanks in advance

    #142639
    itsdavidmorgan
    Theme Author

    Hello,

    Can you provide us with a link to the page so we can inspect your site and the code in detail?

    Thanks!

    #142653
    wnypa92
    Member
    Original poster

    Sure thing: https://www.wnypa.org/wp-login.php Please use guest account (expires 4/19/19) to view as the website is still being built. user: guest pass: guestg41919.

    You’ll see the issue right on the homepage. If you refresh the page try incognito mode or clearing cache to recreate the issue.

    Thanks in advance.

    #142731
    emilysuesrq
    Theme Author

    Hello, the login had expired by the time we reached this reply. Please reset or provide link to view the page. Thanks!

    #142752
    wnypa92
    Member
    Original poster

    Apologies; user: guest pass: guestg050319

    Thanks for your patience

    #142992
    itsdavidmorgan
    Theme Author

    Hello,

    The team members appear to display correctly upon first load for me, https://cloudup.com/cqimUnR686p

    What browser are you using?

    Also, try clearing the cache for your browser.

    Btw, great team member illustrations :)

    Thanks!

    #142995
    wnypa92
    Member
    Original poster

    Hi David!

    I thought about this just earlier today. I tried on IE, Edge, & Firefox just fine. It appears that Chrome is having the issues.

    Anytime I make a change to view or test I usually open an incognito window to avoid cache issues. And I’ve seen the issue on multiple devices with chrome.

    In your screenshot (and I’ve seen this too) do you also know why the second row item isn’t aligned left or right?

    Thank you very much! None of our members wanted to put their face on the page so I had to find something appropriate :D check out https://joeschmoe.io if you’re interested.

    #143189
    itsdavidmorgan
    Theme Author

    Hello,

    I’m unable to log back into the site to do any testing in Chrome. It appears the login expired.

    However, fixing the alignment of the team member on the bottom may resolve the other issue that’s occurring upon loading.

    So, the reason that bottom team member is not aligning properly is because the featured images uploaded for each team member are slightly different dimensions. That team section uses a script called “Masonry” which organizes all members like puzzle pieces. So, if you have content of varying sizes, the team members stack in a way that doesn’t leave gaps.

    However, in your case you probably want to avoid that functionality since you don’t have a large number of team members. In short, ensure that all the featured image illustrations are exactly the same dimensions when uploading them.

    That should fix the alignment issue, and hopefully the loading issue as well.

    Thanks!

    #143194
    wnypa92
    Member
    Original poster

    Hi David!

    Thanks for taking another look. I appreciate the help thus far. The login is no longer needed. You should just be able to visit the site now at http://www.wnypa.org.

    I tried resizing all of the images so that they are the same and it doesn’t appear to make a difference with the overlapping, but it did help with the order they appear.

    My latest screenshots are here; https://imgur.com/a/fFX8Hbe it seems that Chrome and Safari are the only two with issues.

    #143259
    itsdavidmorgan
    Theme Author

    Hello,

    No problem. :)

    I see the issue. I committed an update to the theme that changes the load order of that Masonry script. Hopefully, that resolves the issue. However, WordPress.com has to approve the theme update. So, it might take a couple days before the update is pushed.

    Try clearing your browser cache in a couple days, and loading the page again. Let me know if that works. If it doesn’t, we’ll try something else.

    Thanks!

    #143287
    wnypa92
    Member
    Original poster

    Thanks David! I’ll keep an eye out for the update.

    Appreciate all the help.

    #143454
    emilysuesrq
    Theme Author

    You’re welcome!

  • The topic ‘Team Members – Rows overlap’ is closed to new replies.