Stop Fullwidth Portfolio Images from Being Cropped

This post may contain referral links which may earn a commission for this site

When used in grid mode, the Divi Builder's fullwidth portfolio module expands the featured images of projects to fully fill the grid boxes. This can lead to parts of the images becoming cropped or stretched, as can be seen in this same portfolio grid:

If you'd prefer to have your full image displayed and centered within the grid box, you can use the following CSS:

.et_pb_fullwidth_portfolio .et_pb_portfolio_image img { 
    max-width:100% !important; 
    min-width: 0 !important; 
    width: auto !important; 
    max-height: 100% !important; 
    min-height: 0 !important; 
    height: auto !important; 
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.et_pb_fullwidth_portfolio .et_pb_portfolio_image { 
    text-align:center !important;
}

The result should look something like this:

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments