[Tutorial] Perfectly square images or divs! (and responsive)

Community resources Show & Tell
1

Hello Webflow-ers :wave: :webflow_heart:

I just thought I’d share a quick way to get perfectly square images everytime in the Webflow designer, regardless of the viewport size… I know some users struggle to do this without using explicit pixel sizing which isn’t ideal for responsiveness.

With this method, you can set it up once on the desktop viewport, and they will always stay square no matter what the size of the browser.

  • Add a Container, a Grid (make it 3 columns if you like) and add a single div into the grid

    Image 2020-09-03 at 9.21.15 am
    Image 2020-09-03 at 9.21.15 am1408×509 18.7 KB

  • Next, give the div a height of 0px, and a top and bottom padding of 50% (make sure it’s percent, not pixels.

  • Also set overflow: hidden and give your div a position: relative
    You can see the settings with the blue style label below

    Image 2020-09-03 at 9.41.04 am
    Image 2020-09-03 at 9.41.04 am1470×1014 76.2 KB

  • That’s your div wrapper done

  • Now to add images:

  • add an image inside the div

  • Give a min-height and min-width of 100%

  • Set position: absolute and full
    Image 2020-09-03 at 9.56.13 am

  • Lastly, set the object-fit property to cover so the image fits properly, and is not skewed.

Screen Recording 2020-09-03 at 09.46.12 am

Now you can copy and paste the div wrapper a few times and see how it looks across different breakpoints. Checkout this Grid tutorial if you need to as well.

et voila

Which is French for “this is how you make images square and responsive”… I think.

Screen Recording 2020-09-03 at 10.03.22 am

Let me know if you found this helpful, or if theres a different way that you do it as well.

19 Likes
2

Thank you so much for this tutorial! I was having a tough time trying to get my CMS Collection wrap images to align inside the grid as the same size and this worked!

I am still trying to get my buttons at the bottom of the card to align as well. Do you have any tips for how I can do that? Right now they are basing there position off of how long the paragraph is before them.

1 Like
3

Hopefully this GIF explains it for you! :smiley:

Style the div with flexbox, and make the paragraph Grow if possible.

Shared with CloudApp

1 Like
4

I applied flexbox to my div with a heading, paragraph, and button inside. Then made my paragraph grow but nothing changed in my layout. Do you know anything I could check that could be preventing it from working?

5

Feel free to add a read only link if possible, without it it’s difficult/almost impossible to say :slight_smile:

6

Here is my read only link:
https://preview.webflow.com/preview/1ig-print-2-a8c086d271359ee8cac0fcc7e8c?utm_medium=preview_link&utm_source=designer&utm_content=1ig-print-2-a8c086d271359ee8cac0fcc7e8c&preview=de43f0822336af6d9919d7803fa67609&mode=preview

I have applied flexbox to my “1IG STORIES” symbol but the buttons aren’t moving.

7

You seem to have an extra div. If you want the buttons at the bottom, you can try this…
To mkae it work on all the others, just rename the Div Block class and apply it to all the other div blocks.

Hope that helps!

8

Thank you for the information on that area but I was trying to refer to this area, called the “Teaser-Div-Block”. It’s within a CMS collection and it has flexbox applied and stretch on the paragraph.

Screen Shot 2020-09-21 at 1.48.47 PM
Screen Shot 2020-09-21 at 1.48.47 PM1608×967 423 KB

9

tenor (5)
Sorry about that! :crazy_face:

Try this instead, (45sec video with sound.) I hope this helps :smiley:

1 Like
10

YES! Was the sizing of the blog wrap and the button preventing it from working? Thank you for the help that worked perfectly. :smile:

11

No worries. Yes, you need a specific height for the blog wrap to make them all equal, the Button was taking up space too. Glad it’s sorted.

If you have any more issues, feel free to open a new topic and share your link where possible. Welcome to Webflow forums! :wave: :webflow_heart:

2 Likes
12

Hi @magicmark
I wanted to center vertical images within the square div. Could it be that your approach didn’t cover for that? Seems that adding margin: auto to all sides of the images works for me, or have I overlooked anything in your instructions?

13

Awesome, thanks a lot, was looking for some time now to solve this!!

1 Like
15

This is great! Thanks so much for sharing. :slight_smile:

1 Like
16

Just building my first webflow site - this is exactly what I needed - THANKS!

1 Like
17

Hey there!

Thanks for the tutorial, I tried to apply it to the Instagram boxes I have at the bottom of my page but they just seem to disappear. And also still become different shapes, especially when going to tablet or mobile view.

Who can tell me what I’m doing wrong?

Read-only link: Webflow - Something Else Tours