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:
