/

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!

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!

• css
• javascript

1 Answer 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.