All Collections
Why a box height should be auto?
Why a box height should be auto?

You can create a responsive layout that's less likely to cause problems on various screen sizes by setting a parent box height to auto.

STUDIO Support avatar
Written by STUDIO Support
Updated over a week ago

In STUDIO, if you drag the box to change the size (width/height), the px value will be set automatically like this.

If you're new to STUDIO, it's easy to leave it alone, but this can cause layout issues.

Unless you have a specific intention, it is recommended to set the height auto as much as possible, especially for the parent box of grouped boxes. Here, we will explain the reason and specific examples.

About "auto" unit

A box with this value set will be as tall as a box inside them. Text and image boxes will have the height of the element itself, and a parent box of a group will automatically be heightened according to a box inside.

Please check here to learn about other units.

FAQ 1: Element sticks out

When a child box is bigger than its parent box, it can stick out. You should be especially careful when placing a long text. Even if it looks fine in the editor, when you browse the public site on a slightly narrow screen, the line breaks in the text may cause it to stick out.

FAQ 2: Gets stuck when scrolling

When the element in it is larger than the specified width and the overflow setting is other than "hidden", it gets stuck when scrolling.

If the element in it is smaller than the parent box, it won't get stuck. However, as mentioned before, the size is subject to change. It is better to set height as auto.

When you set px intentionally, check the overflow setting of each box to avoid any issues.

height auto height settings

Did this answer your question?