Is there an option to lock the container box proportions?

Ask the community
1

I try to make the square always square;)
At the desktop breakpoint, I set the maximum and minimum size in = 96px, h = 96px; w = 48px, h = 48px, then I change the settings to fluid. After changing the breakpoint, the proportions are completely different. What am I doing wrong?

2 Likes
2

Hi Joanna,
I am Anna from the Editor X Product Team.

Once you set the container width to fluid, the value in this field is changed to %. So, if you had w=300px and h=300px, you will now have, for example, w=20% These 20% on a different viewport size will be something else entirely. The actual px value will be within the range you set up using min/max width, depending on viewport, but it won’t match the height px value anymore and the container proportions will change.

You do have the “scale proportionally” setting for media and decorative elements.

I hope this helps clarify things a little bit. You can see more about how sizing works in the lesson on AcademyX: https://www.wix.com/editorx/academy/sizing

Thank you for your feedback and please feel free to reach out again if you have any other questions or need assistance in getting to a specific design.
In the meantime, have a great day!

3

Hi @joannaiwanska91

To add to what Anna wrote, there is a way to set a container to keep its proportions while changing size. You can achieve that by setting both its width and its height in the vw unit. This means they will both change in proportion to the viewport’s width, and will keep the proportion between them.

Hope this helps :slight_smile:

4

Hi! I’m new to EditorX and also trying to create a simple square container that scales while maintaining an actual SQUARE. I’ve also tried a workaround using a grid and trying to set the grid area to maintaining a scalable 1:1 ratio, but the only way to keep a square is to use a fixed px setting, which obviously doesn’t scale across breakpoints.

Did anyone figure out how to do this? It seems like a such a simple thing to do, and I’m hoping there’s a solution that I’m simply not seeing/understanding. Thanks!

5

Found it! Thanks @klarak for sharing this expert tip: