Add Space Between Fullwidth Portfolio Items

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:

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

Divi Booster

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

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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