The column widths can be adjusted beyond the defaults in the pre-made and Theme Builder themes using the Custom CSS feature. Custom CSS allows you to make minor or major design changes using small bits of CSS (Cascading Style Sheets) code. At Design > Custom CSS, you can enter a little bit of code to adjust the column width of your blog.
Please note if you are using a responsive theme, the column widths adjust to fit the size of the window or device used to view the blog. The CSS in this article will not apply to responsive designs. For help with design changes to responsive designs using CSS, open a help ticket.
When using the Theme Builder to create a custom theme, the CSS you use will depend on the layout you have selected. If you have selected a Two-Column-Right Classic Layout, an example of the code you would use is:
The #container is the total of all column widths. In this case, the main content column is 600px wide and the right sidebar is 300px, so the container of the blog is 900px. If you are using a layout with the sidebar on the left, you can replace layout-two-column-right with layout-two-column-left.
To change the width of a One-Column Classic Layout, here is an example of the CSS you can use:
For a Three-Column Classic Layout, you have three columns, alpha, beta, and gamma, and an example of the CSS you can use is:
Many pre-defined Themes include padding in the columns and you will need to take the padding into consideration when setting your column width. Not all pre-defined Themes are compatible with Custom CSS changes as the themes include graphical elements.
An example of the CSS to edit the column width for the Vicksburg Theme with a two column right layout:
The total of the columns with the Vicksburg pre-defined Theme does not add up to the 900px container because the stylesheet includes 20px of padding in each column.
For the correct CSS to change the column widths for other themes, see the articles for the individual themes:
Please note that the pixel widths used in this article are just examples. Using an incorrect number could change the appearance of your blog as there are other elements involved in a theme. We recommend creating a test blog to try out design changes. Learn more.
Some Themes will require additional CSS to remove styles unique to the theme. You may want to try adjusting these figures in increments of 50 or 100 pixels at a time to be sure you won't affect how the rest of the blog is configured. Also, you can always start over by removing all of the code from the Custom CSS field. Open a help ticket if you need help with CSS code.
Updated 13 September 2017
Not quite what you are looking for? Check out these other articles:
- For information on the features of the compose editor, see the article on the Rich Text toolbar.
- Tips for improving SEO are available in the SEO Overview article.
- To create a custom, responsive design, you can use the Design Lab and choose from dozens of fonts for posts and pages.