How can I make my divs perfectly square with a ratio of 1:1 and retain their square shape when resizing responsively in Webflow?
TL;DR
- Set the div’s width (e.g., 50%) and apply padding-bottom: 100% to maintain a 1:1 square aspect ratio.
- Use relative positioning for the div and absolute positioning for any child content to maintain layout control.
To create perfectly square divs (1:1 aspect ratio) that remain square across all screen sizes in Webflow, you need to use a responsive technique based on padding.
1. Use Padding to Create a Square Ratio
- Webflow does not offer a direct “aspect ratio” setting for divs, but you can simulate a 1:1 ratio using padding-top or padding-bottom.
- Set the div’s
padding-bottomto 100%. This maintains a height equal to the width, keeping the div square. - Example: If your div is full-width (say 50% of the containing element), setting padding-bottom: 100% will make it a perfect square.
2. Steps in Webflow Designer
- Select or create your div (e.g.,
Div Block). - Set the width using any responsive unit (%, vw)—for example, 50% or 25vw.
- In the Style panel, go to Spacing → Padding and set Padding Bottom to 100%.
- Set the position of the div to
relative. - Add child content (if needed) with absolute positioning to position it over the square.
3. Optional: Use Aspect Ratio (Fallback Method)
- If you are using newer CSS features (and Webflow supports it on published sites), you can set a Custom Code style in the Page Settings or inside an Embed element to apply:
aspect-ratio: 1 / 1;to the target class.- Webflow does not yet support the
aspect-ratioproperty natively in the Style panel.
Summary
To keep a Webflow div perfectly square and responsive, set its padding-bottom to 100%, which maintains a 1:1 aspect ratio. This technique ensures the shape remains intact across all screen sizes.
