How to create with Responsive behaviors

Learn how to use the different Responsive behaviors to control how your elements behave across all viewport sizes.

In this tutorial, Kayla from the Wix Studio team explains how to choose different responsive behaviors for elements in the Studio editor. By default, elements are set to "Scale proportionally," maintaining their width-to-height ratio across screen sizes. Other options include "Fixed," which keeps the element's size consistent; "Hug," where the bounding box adjusts to the content; "Stretch," which fills the parent container; and "Relative width," where only the width scales. For text, there's "Wrap," which adjusts text to fit smaller screens, and for sections, "Fit to screen" and "Fixed height." These behaviors help tailor the design's responsiveness.

Transcript

Hey, Kayla here from the Wix Studio team. I’m going to show you how to choose from different responsive behaviors in the Studio editor.

For each element in a design, I can decide what it’s going to do as the screen resizes by setting the responsive behavior here in the Inspector panel.

There are a few to choose from, so I’ll show you each one and how it affects the element’s behavior. Time to dive in.

Every new section and element you add is set to Scale proportionally by default.

This means everything keeps the same ratio of width to height as the screen scales up and down.

Depending on the design and layout you’re going for, you might want different responsive behaviors.

First up, I’ll switch to Fixed. It’s just how it sounds – you set an element to fixed to keep it the same width and height on every screen size.

A fixed text element, for example, stays the same pixel size from desktop to mobile.

You can apply this behavior to most other elements too, like images or containers.

Next we have Hug. This gets the blue bounding box of the element you’re working with to surround the content inside.

So here, the bounding box resizes to the width of this text. If I add more text, the bounding box gets wider to contain it.

Great. Now for Stretch. This one stretches an element to fill its parent container.

If an element can be stretched, you’ll see a little arrow icon in the corner – like this. I can unstretch it. And stretch it again.

And it stays stretched to the parent across breakpoints.

We also have Relative width, where the container width is scaling but the height stays the same.

There are a couple of behaviors that you’ll only see for certain components.

This first one can only be applied to text elements, and that’s Wrap. With this one, the boundary box around the text decreases in width at smaller breakpoints, and causes the text to wrap onto new lines.

That makes the element get taller on smaller screens.

Okay this next one – Fit to screen – applies to sections. With this, the section will fill the entire viewport.

Last but not least, we’ve got Fixed height. This one will only apply to sections – and it means that the section stays exactly the same height, no matter the viewport size. See? Same height.

There you go. Now you can choose from these defaults to get the responsive behaviors you want.

Thanks, until next time…