How to Use Advanced Sizing & Measurement Units with Wix Studio

Hey there, fellow design enthusiasts! Kayla from Wix Studio just shared an awesome overview of advanced sizing and measurement units in the Studio Editor, and I couldn't wait to delve deeper and share it with you all. Whether you're a seasoned web designer or just starting out, understanding advanced sizing can be a game changer. So, put on your virtual seatbelt as we navigate through the world of pixels, percentages, and viewport units!

Wix Studio's Advanced Sizing: Your New Superpower

In Wix Studio, most elements come with default responsive behavior. This is great for beginners, but for those of us who love tinkering with dimensions behind the scenes, advanced sizing is your new best friend. By clicking the More actions icon and switching on the advanced sizing toggle (or just hitting OPTION + I), you gain control over individual components' sizing across all breakpoints. Just a heads up: advanced sizing is a one-at-a-time deal—you can’t blanket your entire site with it in one go.

Taking Measurements into Your Own Hands

After turning on advanced sizing, breakpoints reveal a set of measurements that default options often won’t cover. You can switch things up, go back to desktop, turn off advanced sizing, and rest assured—your work remains untouched. On mobile, where these custom measurements are evident, it’s all about the "Mixed" vibe. Think of it as an Inspector panel that simply shows the Editor in a new light.

Responsive Mastery: Pixels, Percentages, and Beyond

Understanding the units of measurement is crucial. Let’s break them down:

- Pixels: The solid measurement. Pixels are consistent across all screens and serve as the foundation for fixed default responsive behavior.

- Percentage: This offers a fluid approach. Elements set at 70% width will always occupy 70% of the parent element, keeping things proportionate across all screens.

- Viewport Units: Here, it’s all about the ‘grandparent’—the viewport. With measurements like Vw (viewport width) and Vh (viewport height), elements scale relative to the user’s browser view, not the parent element.

- Calc: Need some math mojo? Calc enables measurements based on calculations. Want a header and a section to gobble up an entire viewport? Simply apply `calc(100vh - 100px)` for the section height—voilà!

Setting Boundaries: Min, Max, and Auto

Many elements have a mind of their own, and setting boundaries is crucial:

- Min/Max Measurements: Dictate the scaling limits. Set a min and max, and watch it toe the line, preventing uncontrollable scaling.

- Auto: By default, an element’s height dances to its children’s tune, which flexes with the container’s content size. If you don't want it to shrink to nothingness without content, set a minimum height.

- Max Content: This setting allows a parent element to match the max width or height of its content, creating one seamless look.

Get Empowered with NewForm

This is just a taste of the boundless possibilities with Wix Studio’s advanced sizing. But as you know, learning never stops. At NewForm, we’re dedicated to elevating your design skills, discovering market opportunities, and connecting you with industry trailblazers.

Why Join Us at NewForm?

- Monthly Web Design Challenges: Take part in design challenges with exciting cash prizes.

- Weekly Skill-Building Events: Engage and learn new skills every week.

- Exclusive Guest Sessions: Join sessions with top web design professionals monthly.

Ready to take your design prowess to the next level? Jump in and be part of our vibrant community at NewForm. Let’s innovate, inspire, and transform the design landscape together.

Thanks for tuning in! Catch you next time—and don't forget to explore even more fantastic opportunities with us at NewForm. Happy designing! 🎨✨