How to change the size / aspect ratios of the portfolio grid images.

How to change the size / aspect ratios of the portfolio grid images.

The portfolio grid is one of the better looking Divi features. I love that everything stays in a neat line on any device. The only problem is that not everyone wants a grid of ever so slightly landscape images. What if you want square portfolio images? or maybe you’re an author looking to display book covers? The forced aspect ratio being applied to the images by JS deep in Divi’s core can make this difficult.

Sure, you could use a fixed height to override this but then you lose the magic of the fluid grid. The real solution would be a if you could somehow set the height as a percentage of the width. With this CSS hack, you can.

 

.et_portfolio_image {
 padding-top: 100%;
 }
 .et_portfolio_image img {
 position: absolute;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 object-fit: cover;
 }

Just change the padding-top until you get the desired aspect ratio. We hope you liked this tip 🙂

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.