Question posted in
The full documentation can be found here.

Why does a row set to full-width has a width of 89% in Divi theme?

In Divi when I create a simple row and set that row to “full width”, its width in CSS is actually 89%:

.et_pb_row.et_pb_row_fullwidth, .et_pb_specialty_fullwidth>.et_pb_row {
    width: 89%!important;
    max-width: 89%!important;
}

Why and how to solve that problem? Note: my row contains two columns.

Tags:

3

Answers


  1. 0

    The rows are set to max-width:89/90% combine with margin-left/right:auto to maintain gutters on either side of the content.

    You’ll want to use a full-width section & not a specialty-section. If needed you can add custom-classes to the section. I’ve found it’s best to add classes at the top-level (on the sections, not any of their rows or modules).

    If needed, you can deque the module shortcodes, rewrite them yourself & then remove / re-add their shortcode handles. This article explains it well: https://jonathanbossenger.com/building-your-own-divi-builder-modules/

    From: Customizer >> General Setting >> Website Content Width you can set the max-width of the main contents.

    This should do the trick, unless it’s being intercepted by inline-styles. The .et_pb_column element might be getting in the way as well.

    Try adding the following to the Additional-CSS section in the customizer.

    .et_pb_row.et_pb_row_fullwidth {
    width: 100%!important;
    max-width: 100%!important;
}
    Login or Signup to reply.
  2. 0

    You can use this code insted of your current css

    .et_pb_row.et_pb_row_fullwidth,
.et_pb_specialty_fullwidth .et_pb_row {
    width: 100%!important;
}
    Login or Signup to reply.
  3. 0

    It’s coming from Divi Builder Settings. You can easily make them 100% width.

    Just open the page, which you want to change and go to Edit page. Use builder of theme by clicking to Use The Divi Builder:
    Divi builder button

    After click options button ( I marked it red in the image below ):

    Divi builder bar

    You’ll see popup with some options. Find Gutter Width and set its value to 1:

    Divi builder popup with settings

    Click Save button and then Update page( use default wordpress sidebar at right side of your page):

    wp sidebar

    You can check your page. The css rules you provided will ovveride with width: 100% by just Divi settings:

    css

    P.S. You should make this changes for all pages, where you want to have 100% width. If you want all pages have 100% width by default, then you should go to: Appreance -> Customize -> General Settings -> Layout Settings, change value of Website Gutter Width to 1 and append changes ( at the top of sidebar click Save & Publish button )

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search