In our drag-and-drop platform, the ease and flexibility of designing is paramount. However, there are certain nuances to be aware of to ensure a smooth building experience. One of these concerns resizing elements when their width or height settings are on certain modes.
This article will guide you through the process of effectively resizing elements and understanding the width and height settings.
📢 Heads Up! Encountered a toast while trying to resize an element? This usually indicates that the element's width or height is set to "Fit-content" or "Auto". To remedy this, switch to a numeric value such as Pixel or Percentage by following the steps outlined below.
1. Understanding Width and Height Settings:
When you select an element in the builder, you can define its width and height using different units:
Pixels (px): A fixed unit that will keep the element's size consistent.
Percentage (%): Makes the element's size relative to its container.
Auto: Lets the platform decide the size based on content and other factors.
Fit-content: Adjusts the size based on the content inside, but won't exceed the available space.
Em (em): A relative unit based on the font-size of the element. For instance, if an element has a font-size of 16px, then
1em = 16pxfor that element.Rem (rem): Similar to
em, but always relative to the root element's font size (usually the<html>element). If the root font-size is 20px, then1rem = 20pxthroughout the site, irrespective of the local element's font-size.
2. Why Do I Get a Warning When I try to Resize an Element?
When an element's width or height is set to either "Auto" or "Fit-content", it dynamically adjusts based on the content within or other elements around it. Due to this dynamic nature, direct resizing using the drag handle isn’t possible. It's designed this way to ensure the content or layout doesn't break or look out of place.
However, if you set the size in either pixels or percentage, you have a fixed or relative reference point, which allows for direct adjustments using the resize handler.
3. Changing the Units: A Step-by-Step Guide
If you wish to resize an element manually using the resize handler, follow these simple steps:
Select the Element: Click on the element you wish to resize on the canvas.
Navigate to Layout Settings: Once selected, look for the "Layout Settings" option, often located in the sidebar or properties panel.
Adjusting Width or Height: In the Layout Settings, locate either the "Width" or "Height" option.
Change the Unit: Click on the unit dropdown, which may currently be set to "Auto" or "Fit-content". From the dropdown list, select either "px" (pixels) or "%" (percentage).
Resizing: Now, go back to the canvas. You should see the resize handler (a small icon on the edge of the element). Click and drag this icon to adjust the size of the element manually.
Conclusion:
Understanding the intricacies of our platform ensures you make the most out of its features. Remember that certain width and height settings are meant to make your content adaptable and responsive. However, if manual adjustments are needed, it's just a few clicks away!
For further queries, don't hesitate to reach out to our support team or refer to our extensive documentation library. Happy building!