Older isotope portfolio rows shifting downward by 1 pixel on hover

https://visaud.io/shows/

Please see the above link. As you’ll see, if you hover over the portfolio items, they either shift to the next column/line (in the case of columns 1-3) or shift all the content below it in the case of the 4th column.

I don’t recall when the issue started happening, though perhaps it’s the result of a WordPress core update? Any insight or help would be greatly appreciated. I’m hoping it’s just a simple CSS oversight that I might have missed or accidentally messed up.

Thank you in advance!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

It’s the border at the bottom of #portfolio-items article when you hover.

There actually doesn’t appear to be a border at the bottom of the article element, the gray border you see is at the bottom of the the link using#portfolio-items article .project-meta at the bottom of the portfolio item.

So you have two options, re-write the CSS section for hover to change the gray to green, by adding a rule like this:

#portfolio-items article:hover .project-meta {
     border-bottom: 1px solid #33be25;
}

And then remove the border from this rule:

#main-nav a:hover,
#main-nav .hover>a,
#main-nav .current_page_item>a,
#main-nav .current_page_parent>a,
#main-nav .current-menu-item>a,
.projects-carousel a:hover,
#portfolio-items>article:hover,
.team-member:hover {
         border-bottom: 1px solid #33be25;
}

But that will effect all the other items so maybe just add this rule:

#portfolio-items>article:hover {
     border-bottom:none;
}

I think what would be more effective though would just be to update this rule:

#portfolio-items article {
     margin-bottom: 50px;
     border-bottom: 1px solid transparent; /* add this line */
}

So what you’re basically doing is including the logo already, so that when the items load they have their set size… …then when you hover all you’re doing is changing the colour from transparent to green.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0