Constrain columns to squares

[stevenworrell85]

Hi everyone.

I have a section made up of 3 columns. I want them to maintain their square dimensions when the viewport width is changed. In the example here, the columns appear square in the designer but when previewed the columns stretch out into rectangles.

Any help much appreciated.

Thanks,
Steve

---

Here is my site Read-Only: https://preview.webflow.com/preview/wozzatestbed?preview=7293b152402f5476358d3a077f301d36

preview site - http://wozzatestbed.webflow.io/

[stevenworrell85]

Just some screen shots. 1st being the previewed rectangles. 2nd being in designer.

I just realised that I meant that I want to maintain the aspect ratio, not dimensions. I want to keep the columns as squares at all widths.

[stevenworrell85]

Solution - I used columns instead of div blocks.

I then used Images within the columns.

This has raised another question for me though. Is there a way of working out what the dimensions of an element so you can design on photoshop for example?

[garymichael1313]

Hi,

I wouldn’t use images for this, it’s not necessary. Just use:

1. One Section - set it to flex
2. Add 3 Divs - use the (cog) to add %'s and tweak these settings to get the proportions right
3. Don’t use pixel H & W, because it will not be responsive

E.g., If you use pixels, it would be easy to get a square. Using 200x200. Understand? But using %'s or VW/VH, you’ll need to play with the sizing a little to mimick dimensions.

[system]

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.