Although the Divi options lets you increase the max-width of the site, it doesn’t let you control the percentage width, which makes it impossible to go full width.
Luckily, with a little bit of CSS magic, it’s really easy to increase the width of your menu, footer, and also the whole website.
You can add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options), and then just update the width % and max-width values to suit your needs.
I’ve divided the code up so you can pick and choose which part of the site you’d like to increase the width of. If you’d like to increase the width of the whole site, then just use the code at the end.
Increase width of the Divi menu:
#main-header .container {
width: 90%;
max-width: 1280px;
}
Increase width of Divi page content:
.et_pb_row {
width: 90%;
max-width: 1280px;
}
Increase with of Divi footer:
#main-footer .container {
width: 90%;
max-width: 1280px;
}
Increase the width of all 3:
.container,
.et_pb_row {
width: 90%;
max-width: 1280px;
}
Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: [email protected]
You can also checkout more Divi tutorials below.
Get FREE Divi tutorials and layouts each month!
Join 400+ Divi enthusiasts and level up your web design game!
I do consider all of the concepts you’ve introduced for your post.
They are very convincing and will definitely work. Still, the posts are very short for beginners.
May just you please extend them a little from next time?
Thanks for the post.
Why this is not working with localhost??
It should work. Which part are you using?