Add Space Between Fullwidth Portfolio Items

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 displays the featured images of projects right up against each other, as shown:

If you'd prefer to have a bit of space between the images in your fullwidth portfolio grid, you can use the following CSS:

.et_pb_fullwidth_portfolio .et_pb_portfolio_item {
	width: 96% !important;
	margin: 2% !important; 
}
@media all and (min-width: 497px) {
	.et_pb_fullwidth_portfolio .et_pb_portfolio_item {
		width: 46% !important;
		margin: 2% !important; 
	}
}
@media all and (min-width: 785px) {
	.et_pb_fullwidth_portfolio .et_pb_portfolio_item {
		width: 29% !important;
		margin: 2% !important; 
	}
}
@media all and (min-width: 1041px) {
	.et_pb_fullwidth_portfolio .et_pb_portfolio_item {
		width: 21% !important;
		margin: 2% !important; 
	}
}
@media all and (min-width: 1617px) {
	.et_pb_fullwidth_portfolio .et_pb_portfolio_item {
		width: 16% !important;
		margin: 2% !important; 
	}
}

The effect will be something like this:

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

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *