Design & Layouting
Sizing.
You can set the sizing properties of each element to control how they respond to changes in the viewport width.
Sizing options.
Select an element on the canvas and open the Inspector panel to control how it resizes. Choose from Fixed, Fluid or Scale proportionally.
Fixed.
Use Fixed sizing to keep the width of the element the same across all viewport sizes. Fixed elements are generally measured in pixels (px).
Fluid.
Fluid sizing adjusts the width—and sometimes the height—of elements depending on the screen size. With fluid sizing, elements are measured in proportional units like percent (%), viewport height (vh) and viewport width (vw).
Scale proportionally.
When elements are scaled proportionally, their height and width maintain a balanced ratio when resized.
Note: Scale proportionally is only available for media and decorative elements.
One more thing.
You can set different sizing options for your elements at each breakpoint.
Intro
TRY IT YOURSELF
Exercise on sizing.
Open Academy X from desktop to complete this exercise.
{No.}
{Exercise Description}
{No.}
{Exercise Description}
Open Academy X from desktop to complete this exercise.
Did you find this resource helpful?
Thank you for your feedback!
Next lessons.
VIDEO LIBRARY
Title
Learn how to add new sections, rearrange them & flip them to vertical.
▶
LESSONS & EXERCISES
Title
Learn how to work with sections—the building blocks of your site.
▶
VIDEO LIBRARY
Title
Get to know where you control size, position and behavior of all elements.
▶
LESSONS & EXERCISES
Title
Learn how to take precise control over the positioning of elements using grid.
▶
Related learning resources.
VIDEO LIBRARY
Title
Learn how to add new sections, rearrange them & flip them to vertical.
▶
LESSONS & EXERCISES
Title
Learn how to work with sections—the building blocks of your site.
▶
VIDEO LIBRARY
Title
Get to know where you control size, position and behavior of all elements.
▶
LESSONS & EXERCISES
Title
Learn how to take precise control over the positioning of elements using grid.
▶
Ready to start creating?
Top searches
People are searching for
VIDEO LIBRARY
Introducing Editor X
Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.
VIDEO LIBRARY
Getting Started
Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.
