Editor X Simplified: Percentage VS Viewport | Wix Fix

Hello, design enthusiasts! Today's blog post is dedicated to all those who love learning new tips and tricks about Editor X. In this write-up, we will walk you through the comparison and importance of percentage versus viewport in Editor X.

If you're new here, let us introduce you to our awesome community of creative minds. We are a part of Live Learning - livelearning.editorx.io - a platform that offers mentoring for all those interested in building design businesses and furthering their career. We host monthly NoCode Design Challenges with exciting prizes, so don't forget to join the fun!

But for now, let's dive into today's topic, shall we?

A Brief Overview of Editor X

Editor X is a powerful web design tool that enables users to create fully responsive, professional-looking websites without any prior programming knowledge. One of the vital aspects of mastering this platform is understanding the difference between percentage and viewport widths when designing your website.

In our last video, we touched on this topic briefly. However, we believe that the difference between the two warrants its own discussion. So, let's dive in and explore the nuances of percentage and viewport widths.

What is the Difference Between Percentage and Viewport?

You may have already come across these terms during your Editor X experience. Both percentage and viewport are units of measurement that help you create a responsive design. While they may appear similar at first glance, they have distinct differences that make them suitable for various purposes.

Percentage

The percentage unit is relative to the parent container or element in which an element resides. In other words, when you assign a width of, say, 50% to a container, it occupies half of the available space in its parent element.

This unit is particularly useful when you're creating designs that need to adjust to different screen sizes or display settings. By using percentages, you can ensure that your containers will resize proportionally and maintain the overall design structure.

Viewport

Viewport, represented as VW (viewport width) and VH (viewport height), is a unit relative to the size of the entire viewport (i.e., the browser window). A width of 100 VW would mean that an element stretches to fill the entire width of the browser window, regardless of its parent container.

This unit can be useful when you want to create full-width elements that span the entire screen, such as headers or banners. It offers more control over the positioning and scaling of elements on different devices.

Why Does It Matter Which One You Use?

To understand the importance of choosing the right unit for your design, let's explore an example scenario.

Suppose you have a container in a section and set its width to 90 VW. Now, you want to create another container inside this first container. So far so good.

But when you set the second container's width to 100 VW, you're essentially telling it to span the entire viewport width, ignoring the boundaries of its parent container (the first container). As a result, the second container will appear to overflow the first container.

This is where the difference between percentage and viewport becomes crucial. If you had set the second container's width to 100%, it would have perfectly fit within its parent container without any overflow.

Thus, it's essential to understand and choose the right units for your design to achieve the desired layout and responsiveness.

Wrapping Up

Mastering the usage of percentage and viewport widths in Editor X is a vital aspect of responsive web design. It helps you create aesthetically pleasing layouts, ensuring your designs look great on any screen size or device.

If you're intrigued by the world of web design and want to challenge yourself further, don't forget to check out our monthly NoCode Design Challenges and join our community at livelearning.editorx.io for exciting learning opportunities, mentoring, and networking with like-minded individuals.

And, as always, keep exploring, keep learning, and keep designing!