Portfolios…

Full width portfolios give you the hover over with text on top. But they come as 5 columns.
Here is a great tutorial on how to use a different column structure.

Or Add the Following Code to the 'Page' CSS

@media (min-width: 1041px) {
.et_pb_portfolio_item.et_pb_grid_item { min-width: 33.3%; 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%;
}

We used this info on a portfolio on the following sites:

GBL

Looking to get your business seen? Then see us.

Web Site Developer Auckland | North Shore | Matakana | Warkworth | Omaha

Call 021 158 1400 for Web Design North Shore, Auckland

Share This