Article Widths
Hi if you haven't already, check out our introduction to the front-end editor.
How to control Article width
There are two parts to consider when looking at your article width.
The first part is to select “theme”. Either use the active theme of your website or select the KB Theme to control the overall container. To set it up, please see this article.
The second part is to play with KB settings on the Article Page. Follow the guide below to set your article width.
Article widths within KB settings
Here is a step-by-step guide on the article width settings within the Front End editor.
Navigate to Front-End Editor
Go to your article page, and at the top admin bar, click on the "Edit Article Page Configurations."
Note: If you do not see the top admin bar, then the website admin has disabled it or you are not logged in as an admin. You will need to go to the KB configuration screen on the back end to get to this editor. See this article on how to do this - Click here
Selecting Page Content
The page content is a container that holds all the KB article content within it. This is the main container.
- Click on an empty area to select the Page Content container.
- At the very top, you should see the Page Content Tab. This will indicate you have the correct zone selected.
Note: Step three is another way to get to the Page Content.
Selecting Page Content via Parent Tab
This is the alternate way to select the Page Content zone:
- Select the left or right sidebar.
- You will see two Tabs above for this zone.
- The Green Tab - is the active zone
- The Grey Tab - is the Parent Tab that is also editable.
Notice that you can click on that grey tab to enable editing of the Page Content.
Article Sidebars
If you need more space for the article, you can hide one or both sidebars. Select the desired sidebar and then disable it.
Page Content Width
In the left Editor settings, you will see the available settings for this zone.
- Width: is the number value for your width. In this example, we have set it to 80%.
- Unit: is the unit of width you want to use. Since we set the width to 80, we want to use the percentile units to give our overall container a width of 80%. If we used the PX our container would be 80px and that would probably break your layout. But you could do something like 1000px for example. To change the unit, simply click on the one you wish to use.
Green Arrow show that the container width is 80% of the overall page.
Blue Arrows show the remaining space of 10% on each side.
Screen Breakpoints
Screen breakpoints determine when the setting for a smaller screen width will trigger. For example Tablet break point of 1025 will now change to a width(Tablet) 100%
So at 1025 screen size, the page content will not be 80% anymore but it will become 100% width.
Note: Mobile has no width because all widths are 100% due to the limited screen size for mobile devices.
Body Container Width
The Body container (called Page Content) contains the Left and Right sidebars and the center content between those two.
If you set the width to 75% for example, the article body will be 75% the total width of the page content.
Blue Arrows show the remaining 25% of the page outside of the body container.
This article's heading and steps and notices are built with our Creative Addons plugin.