Stop Fullwidth Portfolio Images from Being Cropped

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:

0 Comments

We may earn a commission when you visit links on our website.