Main Page Width and Page Builders
If you’re having an issue with the KB Main Page width, check your page builder width setting as described below. We cover Gutenberg, Elementor, Divi, and Origin builders.
If you’re using a different page builder, this guide can still help you understand the settings responsible for controlling container or page width. The key is to locate the container holding your KB shortcode and adjust its width settings to ensure it aligns with your desired KB configurations.
Gutenberg ( WordPress ) Builder
Gutenberg is now the default block-based content editor for WordPress. It allows users to create content using customizable “blocks” for text, images, videos, and more. Introduced in WordPress version 5.0, Gutenberg replaced the classic WordPress editor.
In this example, we demonstrate how a page builder, such as Gutenberg, can limit the width of the knowledge base. We have set the KB search row width to 100%, expecting it to span the full width of the website.
Additionally, we set the KB Categories and Articles module row to 1400px, expecting the module to be limited to that width.
However, as you can see, the calculated width is actually 1000px. Something within the page builder is restricting the width.
Gutenberg Container Width
- Click on the container with the KB shortcode. In this example it's the Column block.
- Go to the Settings tab.
- Change the Width to 100%.
Note: On the sidebar settings, you’ll see the “Width” set to “1000px”. These settings are causing the KB’s width to be constrained.
Block Themes Width Adjustments
If the width of your Knowledge Base isn’t spanning the full page or isn’t as wide as desired, and you’re using a block theme, the theme controls the page width. Click here to read the full article.
Elementor Builder
In this example, we demonstrate how a page builder, such as Elementor, can limit the width of the knowledge base. We have set the KB search row width to 100%, expecting it to span the full width of the website.
Additionally, we set the KB Categories and Articles module row to 1400px, expecting the module to be limited to that width.
However, as you can see, the calculated width is actually 1140px.
It appears that something within the page builder is restricting the width.
Elementor Container Width
Open the Elementor editor.
- Click on the container with the KB shortcode and click the Edit Container icon.
- Go to the Layouts tab.
- Change the Content Width to Full Width.
- Change the Width to 100%.
Note: On the left sidebar, you’ll see the “Content Width” set to “Boxed” and the “Width” limited to 1140px. These settings are causing the KB’s width to be constrained.
Elementor Container Padding / Margin
As shown here, there is still a small gap between the edge and the top heading. Please ensure that there are no padding or margin values applied.
Set both margin and padding values to 0.
Divi Builder / Theme
Checklist
Divi elements that could limit the width should be set to 100% to ensure nothing is restricting the Knowledge Base width.
In this example, we demonstrate how a page builder, such as Divi, can limit the width of the knowledge base. We have set the KB search row width to 100%, expecting it to span the full width of the website.
Additionally, we set the KB Categories and Articles module row to 1400px, expecting the module to be limited to that width.
However, as you can see, the calculated width is actually 900px. Something within the page builder is restricting the width.
Divi Row Settings
On the front end, enable the Divi Visual Builder and click on the Row Settings that contain the Knowledge Base shortcode.
- Click on the gear icon to edit the row.
- Go to the Design tab, then navigate to the Sizing section.
- Set the width to 100%.
- Set the max width to 100%.
Save your changes and reload the front end.
The result is a full-width search bar, with the Categories and Articles module set to 1400px wide.
Divi Section Settings
If your row settings didn't adjust the width, check your section width settings.
- Click on the gear icon to open the settings.
- Go to the Design tab.
- Navigate to the Layout section.
- Set the width to 100%.
- Set the max width to 100%.
Divi Module Settings
Finally, if adjusting the row and section settings doesn't work, check your module settings.
- Click on the gear icon to open the settings.
- Go to the Design tab.
- Navigate to the sizing section.
- Set the width to 100%.
- Set the max width to 100%.
Margins and Padding Settings
After ensuring that all widths are set to 100%, the next step is to review the margins and padding settings for all containers.
Page Builder by SiteOrigin
SiteOrigin Builder Row
In this example, we demonstrate how a page builder, such as SiteOrigin page builder, can limit the width of the knowledge base. We have set the KB search row width to 100%, expecting it to span the full width of the website.
Additionally, we set the KB Categories and Articles module row to 1400px, expecting the module to be limited to that width.
However, as you can see, the calculated width is actually 1140px. Something within the page builder is restricting the width.
- Locate the container holding the KB shortcode. In this example, it’s the Row container.
- Click the wrench icon.
- Select Edit Row.
- Select the Layout tab.
- In the Row Layout settings, set the width to Full Width.
Save your settings and preview the front end.
Page Settings
Another area where your width might be restricted is in the overall page settings.
- Navigate to the Page Settings in the sidebar.
- Set the value to Full Width No Sidebar.
Save your changes and preview the results.
