Divi custom container width

If you see the picture above, that full width container. Actually divi has full width container, but the problem in our sop we have set the default container size and that makes the divi default didn't work. so the solution for now we can add manual custom CSS into Divi -> Theme option -> General -> Custom CSS. you can see the code below

//This breakpoint to make the layout only in desktop, because sometimes this layout 
cannot implement on mobile and below. 
@media(min-width: 981px){

	//This is row styling (wrapper)
	.your-row-class.et_pb_row {
		max-width: unset!important;
		width: 100%;

		display: flex;
		flex-direction: row;
	}

	//This for the full width (example: the lady picture above) 
	.your-row-class.et_pb_row .et_pb_column:first-child {
		//you can adjust width depends on the design
		width: 44.5%;
		margin: 0!important;
	}
	
	//This for the normal part (example: description on picture above)
	.your-row-class.et_pb_row .et_pb_column:last-child {
		//this is to make the part still on normal container
		//1135px is our standard container size
		max-width: calc(1135px / 2);
		
		//you can adjust width depends on the design
		width: 40%;
		
		margin-left: 5.5%;
	}
}

and after add that css style, you must set row class. see the picture below:

Last updated