How To Change The Width Of A Column

This guide will show you how to edit the width of an existing column. Changing the width of a column is very useful since it dictates the size of the column on different screen sizes.

Step By Step Guide

1:
First of all we need to load the editor. To do this click ' Content ' on the left menu, once this drops down and gives you some more options, click ' Pages '. Then select the page you would like to edit, finally click the ' Editor ' button in the top left.


2:
Next you will need to click on the column you would like to change the width of. From here click on the two small cogs in the toolbar .


3:
On the next screen click on the ' Column Settings ' button.


4:
Now you will want to click the ' Edit ' button in the top right of the screen. This is where you go to set the size of the column.


5:
On the next screen there are a few options. On the left you can see the different screen sizes, on the right you can then set the size you wish the column to display at that screen size. All the sizes have a fraction and percentage, this dictates the width of the column. So for example if you wanted to create a row with 3 columns you will need to set all three columns to be 1/3 of the screen.

Due to responsive design the normal setup would be full width on extra small screen sizes, e.g. mobile and tablets. Then have it decreasing in width as the screen size gets bigger.

Once you have added your sizes, click the ' Edit ' button.


6:
Finally all that is left to do is click the green ' Save ' button in the bottom right. Now you will be able to see the column appear in the editor.

Related Articles

© Copyright 2024 Toolkit Websites LtdWeb Design By Toolkit Websites