Making Full-width Grid Portfolios Square

Making Full-width Grid Portfolios Square

A while back I wrote a CSS snippet for changing the aspect ratio of the Divi Portfolio Grid Module. Ever since, I’ve been asked if the same trick would work on the full-width grid. The short answer is no. The trick I used in that tutorial used trickery to convince the container to treat the padding-top of the image container as the height controller.

The same isn’t possible with the full-width grid, but that’s not to say the result can’t be achieved. In the case of the full-width grid portfolio we need to override inline css that sets the height. We can do that by making the height a portion of the width using what I’ll call the ‘vw trick’.

vw css trick
  • Google+
  • Facebook
  • Twitter

The VW CSS Trick for dynamic height

The beauty of fullwidth modules is that they are ‘full width’ or 100% of the viewport. This could be written in CSS as 100vw. If that’s true then one quarter grid item is 25vw wide. To make it square, we just need to make the height 25vw too.

At a point, the grid changes to being three wide (33.3vw), then two wide (50vw) and one wide (100vw) so at those points we’ll match the height to the width again with media queries. Here’s the code…

 

@media (min-width: 1041px) {
 .et_pb_portfolio_item.et_pb_grid_item { min-width: 25%; height: 25vw !important; }
 .et_pb_portfolio_item.et_pb_grid_item img { max-width: 100%; object-fit: cover; } }

@media (min-width: 785px) and (max-width: 1040px) {
 .et_pb_portfolio_item.et_pb_grid_item { height: 33vw !important; }
 .et_pb_portfolio_item.et_pb_grid_item img { max-width: 100%; object-fit: cover; } }

@media (min-width: 497) and (max-width: 784px) {
 .et_pb_portfolio_item.et_pb_grid_item { height: 50vw !important; }
 .et_pb_portfolio_item.et_pb_grid_item img { max-width: 100%; object-fit: cover; } }

@media (max-width: 496px) {
 .et_pb_portfolio_item.et_pb_grid_item { height: 100vw !important; }
 .et_pb_portfolio_item.et_pb_grid_item img { max-width: 100%; object-fit: cover; } }
 
.et_pb_fullwidth_portfolio .et_pb_portfolio_image:hover h3 {
 margin-top: 45%;
}

 

If you wanted to make it a different aspect ratio, you would adjust the vw values to whatever you want. The last selector is for the text on the overlay which will need adjusting if you make the grid items smaller.

I hope you find this useful 🙂

 

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.