A Column can only be placed inside a Container element, and it will always base its divisions on the parent container’s width. Most of the time, this will be the Site Width you’ve set for the site. For example, if you’ve set the Site Width to be 1200px, then a 1/2 column will be 600px wide, minus any column spacing you’ve set. Below you can see the possible preset Column sizes when added to the page.
1/1 – A one whole column is 100% of it’s container.
5/6 – A five sixth column is 83.33% of it’s container.
4/5 – A four fifth column is 80% of it’s container.
3/4 – A three fourth column is 75% of it’s container.
2/3 – A two third column is 66.66% of it’s container.
3/5 – A three fifth column is 60% of it’s container.
1/2 – A one half column is 50% of it’s container.
2/5 – A two fifth column is 40% of it’s container.
1/3 – A one third column is 33.33% of it’s container.
1/4 – A one fourth column is 25% of it’s container.
1/5 – A one fifth column is 20% of it’s container.
1/6 – A one sixth column is 16.66% of it’s container.
In Avada 7.0, we have also introduced Custom Widths for Columns, as well as the ability to set column widths (and more) independently on large, medium and small layouts. For more information on how to use this amazing new feature with Columns, please read the How To Set The Display Order And Size Of Columns In Responsive Layouts doc.
You will find Custom Widths under Columns > Design > Width. As seen below, you can click on Use Custom Width, which allows you to set a Custom Width using a percentage value. This gives ultimate freedom of positioning.
There is also a new width option called Auto. With this selected, instead of a fixed width size, the column will take up the space of the largest element inside it that has a set width. So it will only work in certain instances. But any time you have an Element that has a set width, such as an image or an icon etc, you can set the parent Column to Auto, and the Column will resize to the width of the Element.
Examples of Auto Width
On the Home page of the Pet Supplies Website, there is a banner at the bottom of the Page Title Bar, with an image of some pet food, and some text. This becomes a sticky container as you scroll up, and the image has a Image Sticky Max Width that reduces its size as the Container becomes sticky. This image is in a Column set to Auto, so that the Column also resizes with the image, and so the spacing between it and the text next to it remains the same.