Skip to content

Making column width more interactive with Styler

In this article, we are going to explain styling columns with the Styler tool.

Since Kata theme works with Elementor, you need to use Elementor plugin to create the pages in this theme. But the problem arises where Elementor has 3 responsive sizes while Kata uses 6 responsive sizes, namely: Small mobile, Mobile, Tablet, Tablet Landscape, Laptop, Desktop. This means that for every one of these you can create a unique page.

For optimized use of Kata theme, we suggest never using Elementor for styling the columns. As you can see, the desktop view is like this:

For styling any column in the Small mobile, Mobile, Tablet, Tablet Landscape, Laptop, and Desktop sizes, we go to this path: Style > Styler > Column Wrapper > Size.

Keep in mind that to change the width of every column, you need to use this method, and Elementor has no defined size for it. This is because Elementor does not support Laptop, Tablet Landscape, Tablet, Mobile, Small mobile sizes and can cause problems.

For example, to change the width of the column in Tablet Landscape from 44% to 60%, first, you need to change the page size to Tablet Landscape from Devices menu.

Then, in the Size > Width section, the width is set to 60%.

For tablets and smaller sizes, the Styler tool automatically sets the width to 100% and fills all of the screen, so you don’t need to set the width manually.

Kata allows you to edit any element on any size with the help of the Styler tool.