Portfolio images overlapping

Hi there, I cannot see your site right now as it is in maintenance mode. Let me know when it is back online and I’ll take a look for you.

Sorry, that’s stupid of me. It’s back online.

And some extra information: when I use Orvis in stead of my child-theme the effect is the same.
It looks like the masonry effect doesn’t work, the images are aligned in their row.

• This reply was modified 6 years, 9 months ago by tastymouse.
• This reply was modified 6 years, 9 months ago by tastymouse. Reason: extra information

No worries, not stupid at all.

The only time I can seem to get any overlap on the images is if I widen and narrow my browser continuously for a bit and then stop, but after a brief interval if I widen or narrow my browser window, the display corrects itself.

What are you doing to get the overlap on the images, and on which browser? Have you tried to reproduce on other browsers?

Given that the software is setting the absolute positioning for the images directly into the html, I don’t know that there is a lot that can be done. Jetpack is pretty much in control of that. If you can help out with how to consistently reproduce this issue, I can ask the Jetpack developers about it, and chat with our theme developers as well to see if there is anything we can do.

I had one of our theme developers look over the Orvis files and also at your site, and we are not seeing any Javascript errors or anything obvious causing this issue. I’ve also installed Orvis on my local test site and cannot see this issue, except for a very brief time when all the images are loading and then the grid adjusts with proper spacing. We do see that you have this in your Child Theme CSS, which could be contributing to the issue. In particular it is the 0 margin for top and bottom in your 768px media query.

	.jetpack-portfolio {
	width: 760px;
	/*margin: 0 auto;*/
}

I’ll be responding to your other thread on increasing the image sizes a little later as I have to leave for a while. I think we can do it and keep Jetpack happy also.

I thought it might be my child-theme but when I switch to the original Orvis theme in I get the same overlapping images. I also see in the demo that it should work, strange problem….

I also deactivated all plugins, except jetpack of course, and that didn’t change anything. I do use Intuitive Custom Post Order and thought it might conflict but that’s not the case.

I get the behavior in Firefox quantum and in Chrome. I’ll test on other computers and let you know.

Hi, I started all over, re-installed WordPress and it appears indeed to be an issue with my child-theme. I’m going to rebuild that to.

Okay, you were right

We do see that you have this in your Child Theme CSS, which could be contributing to the issue. In particular it is the 0 margin for top and bottom in your 768px media query.

.jetpack-portfolio {
width: 760px;
/*margin: 0 auto;*/
}

This was meant for the single projects display, I should have used .single-jetpack-portfolio

Took me a long time to find out but now it works, Thanks

Hooray and you are welcome! Glad that you have not gotten things back to where they should be. Let us know if you need additional help.