Search Knowledge Base by Keyword

This KB documentation is using Advanced Search, Links Editor and Elegant Layouts add-ons.

Print

Main Page Width and Page Builders

Created OnSeptember 3, 2024
Updated OnSeptember 24, 2024
By:Dave
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
Views124

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

Copy the URL link to this section to share

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.

Gutenberg Builder

This article assumes you have a working knowledge of the Gutenberg Builder and its components. If you are unfamiliar with Gutenberg, we recommend reviewing their documentation before proceeding. Once you are familiar with the basics, you can continue with this article.

To learn about Gutenberg click here.

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.

Click to zoom

Gutenberg Container Width

Open the Gutenberg/WordPress editor.
  1. Click on the container with the KB shortcode. In this example it's the Column block.
  2. Go to the Settings tab.
  3. Change the Width to 100%.
Save your changes and preview the front end.
Gutenberg Container width example
Click to zoom

Note: On the sidebar settings, you’ll see the “Width” set to “1000px”. These settings are causing the KB’s width to be constrained.

Container widths

If the container width is not visible, the above solution did not work, or your Gutenberg layout has a more complex structure, review all containers and parent containers housing the KB shortcode. One of these containers may have a width restriction applied.

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

Copy the URL link to this section to share
Elementor Builder

This article assumes you have a working knowledge of the Elementor Builder and its components (Layouts, Elements, and Widgets). If you are unfamiliar with Elementor , we recommend reviewing their documentation before proceeding. Once you are familiar with the basics, you can continue with this article.

To learn about Elementor click here.

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 width example
Click to zoom

Elementor Container Width

Open the Elementor editor.

  1. Click on the container with the KB shortcode and click the Edit Container icon.
  2. Go to the Layouts tab.
  3. Change the Content Width to Full Width.
  4. Change the Width to 100%.

 

Elementor Container width settings
Click to zoom

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.

Elementor Container padding and margin
Click to zoom

Divi Builder / Theme

Copy the URL link to this section to share
Divi Builder

This article assumes you have a working knowledge of the Divi Builder and its components (Sections, Rows, and Modules). If you are unfamiliar with Divi, we recommend reviewing their documentation before proceeding. Once you are familiar with the basics, you can continue with this article.

To learn about Divi click here.

Checklist

Divi elements that could limit the width should be set to 100% to ensure nothing is restricting the Knowledge Base width.

Divi Section settings
Divi Row settings
Divi Module settings

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.

KB Width 900px because of divi
Click to zoom

Divi Row Settings

On the front end, enable the Divi Visual Builder and click on the Row Settings that contain the Knowledge Base shortcode.

  1. Click on the gear icon to edit the row.
  2. Go to the Design tab, then navigate to the Sizing section.
  3. Set the width to 100%.
  4. Set the max width to 100%.

Save your changes and reload the front end.

Click to zoom

The result is a full-width search bar, with the Categories and Articles module set to 1400px wide.

The result is a full-width search bar, with the Categories and Articles module set to 1400px wide
Click to zoom

Divi Section Settings

If your row settings didn't adjust the width, check your section width settings.

  1. Click on the gear icon to open the settings.
  2. Go to the Design tab.
  3. Navigate to the Layout section.
  4. Set the width to 100%.
  5. Set the max width to 100%.
Section Settings
Click to zoom

Divi Module Settings

Finally, if adjusting the row and section settings doesn't work, check your module settings.

  1. Click on the gear icon to open the settings.
  2. Go to the Design tab.
  3. Navigate to the sizing section.
  4. Set the width to 100%.
  5. Set the max width to 100%.
Module Settings
Click to zoom

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

Copy the URL link to this section to share
SiteOrgin Page Builder

This article assumes you have a working knowledge of the SiteOrgin Builder and its components. If you are unfamiliar with SiteOrgin, we recommend reviewing their documentation before proceeding. Once you are familiar with the basics, you can continue with this article.

To learn about SiteOrgin builder click here.

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.

Click to zoom
  1. Locate the container holding the KB shortcode. In this example, it’s the Row container.
  2. Click the wrench icon.
  3. Select Edit Row.
SiteOrigin Page Builder Row Settings
Click to zoom
  1. Select the Layout tab.
  2. In the Row Layout settings, set the width to Full Width.

 

Save your settings and preview the front end. 

Click to zoom
Container widths

If the row container is not visible, the above solution did not work, or your SiteOrgin layout has a more complex structure, review all containers and parent containers housing the KB shortcode. One of these containers may have a width restriction applied.

Page Settings

Another area where your width might be restricted is in the overall page settings.

  1. Navigate to the Page Settings in the sidebar.
  2. Set the value to Full Width No Sidebar.

Save your changes and preview the results.

SiteOrigin Page Builder page width settings
Click to zoom
Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
5
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?
Tags:
Table of Contents

Copyright © 2024 Echo Plugins. All Rights Reserved.