It isn’t the most obvious how to figure out or set the width of your Divi website. Follow these easy steps:
- In your WordPress dashboard, click on “Divi”, then click on “Theme Customizer”. This should be located under the “Divi” sub-menu.
- Click on “General Settings” (on the left side bar navigation).
- Click on “Layout Settings”.
- Under “Website Content Width” you should see the width of your site in px. You can also adjust it by either dragging the slider control or directly typing in a new width in px.
If you’ve played around with Divi, then you’ll realize there’s a default limitation to 4 columns that you can add per row. I am here today to show you how you can get around this with some CSS.
- Create a new row, with 1 column layout.
- Add a Divi Module of one of the following: Text or Blurb Module
- Inside the Advanced tab, then in the custom CSS area, inside the Main Element text block, add the following code:
4. Repeat step 3 until you have 5 Modules in total.
5. You will need to adjust the “width: 200px” to different numbers to see what fits best for your columns. But a good general rule of thumb is that you should divide the total width of your site by the number of columns you want, so that it equals. E.g.: 1200px width site, with 5 columns = 1200 / 5 = 240px. You should replace the width with: “width: 240px”.
If you need help with figuring out what your Divi website width is or how to adjust it, check out our post about Figuring Out The Width Of Your Divi Website.