How to set an element's width and height

In TeleportHQ, you set an element's size in the Size section of the right panel. Type a value in Width and Height, for example 100% or 320px. You can also drag the handles on the edges and corners of the selected element on the canvas. The size applies to the screen size you are editing and all smaller ones.

Steps#

1. On the canvas, click the element. For example, click an image.
2. In the right panel → Visual tab, find the Size section. It's the first of the layout sections, above Position.
3. In Width, type a value, for example 100%. You can also pick auto, 100% or a saved size from the list.
4. In Height, type a value, for example 400px. Leave it empty (auto) to let the content decide the height.
5. Press Enter or click outside the box to apply.

If you type a number without a unit, TeleportHQ adds the unit the box already uses, or px. You can use px, %, vw, vh, rem, em and more.

Resize by dragging on the canvas#

1. Select the element. Handles appear on its corners and edges.
2. Drag an edge to change the width or height, or a corner to change both.
3. Hold Shift while dragging to keep the proportions.

While you drag a right or bottom handle, the edge snaps to the edges and centers of the parent and of the elements next to it, and a guide line shows what it lines up with. When the parent has a set width, the width also snaps to 50% or 100% of the parent. A message confirms it, for example "The width was set to 100%". Hold Ctrl (Cmd on Mac) while dragging to turn snapping off. Holding Shift turns it off too.

Set limits, overflow and proportions#

The Size section in TeleportHQ has more settings:

• Min W, Min H, Max W, Max H: they show below Width and Height. The arrow button in the Size title row hides or shows them. For example, set Max W to 1200px so a text block doesn't get too wide on large screens.
• Overflow: what happens to content that doesn't fit. hidden cuts it off, scroll and auto add a scroll bar.
• Ratio: keeps a shape, for example 16/9 for a video or 1/1 for a square.
• Object Fit (images and videos): cover fills the box and crops the picture, contain shows the whole picture.
• Flex (only for items inside a row or column): 1 makes the item fill the free space. An info icon warns: "Flex values may overwrite the size property."

Check that it worked#

The element changes size on the canvas right away. Switch to a smaller screen size above the canvas to check how it looks on mobile.

Troubleshooting#

The element has no resize handles Handles don't appear for the page itself, for a component placed on a page, for elements inside a component on a page, and for inline elements. They are also hidden while comments are open. Use the Size section instead, or open the main component to resize its elements.

My Min W or Max W value disappeared after dragging Dragging past a minimum or maximum removes that limit so the drag can work. Set it again in Size if you need it.

The width I typed is ignored inside a row A Flex value on the item can override its width. Clear Flex, or set it to 0 0 auto.

Good to know#

• Sizes in % are relative to the parent. A child with 50% width is half as wide as its container.
• Clearing a Width or Height box removes the value at this screen size. The box then shows in grey the value it inherits, for example from a larger screen size or a CSS class.
• Fixed pixel widths can overflow on phones. When the page is wider than the screen size you are editing, a red info icon appears at the top right corner of the page, next to the canvas width: "The content of your page overflows and may cause visibility problems on some devices." Prefer % or Max W.
• Grey values in a box are inherited, for example from a larger screen size. Hover them to see where they come from.