How To Change The Width Of A Column

This guide will show you how to change the width of a column within a row. Columns are used as the core building blocks of the site and can be made different sizes to take up different widths of the screen.

You may need to use the full-screen option to see the video more clearly.

Step By Step Guide

1:
The first step is load up the classic editor. Click on ' Content ' on the left menu, then go to ' Pages '. Pick the page you would like to edit and you will see the ' Classic Editor ' button.


2:
Once you are inside the classic editor, click onto one of the columns. On the toolbar at the top of the screen click the purple icon on the far right. When you hover over it, it should say ' Edit the block '.


3:
A small box will appear with lots of drop down options. Using the tables below , you can choose the width of your column for each screen size.

Important Information

Size of screen Example Device
(and pixel range)
Large Large Monitor, Smart TV
1200+ pixels
Medium Average computer/laptop monitor
992 - 1199 pixels
Small Tablet, small monitors
768-991 pixels
Extra Small Mobile phones
767 - 0 pixels
Most Popular Columns Widths How wide the box will be
(in relation to parent div)
12 100% (full width)
9 75%
8 2/3
6 50%
4 1/3
3 25%

Related Articles

© Copyright 2021 Toolkit Websites LtdWeb Design By Toolkit Websites