Streaming live at 10am (PST)

Column lengths image gallery

hi - I’m having trouble with my 3 column layout on my work page. I sized all the images for each column so they add up to the same total hight for each column. When I added all my images (without any margins of padding, they lined up at the bottom and top perfectly. However when I added padding to my div blocks to create space between the images, the last image on the right column sits lower - ass you can see via the link.

I cant for the life of me work out what it is. I have resized and uploaded my images so many times - I’m stumped. Really hoping someone can take a look for me please.
Thank you

Here is the link:
https://preview.webflow.com/preview/studio-east?utm_medium=preview_link&utm_source=dashboard&utm_content=studio-east&preview=063461a63d2b2ddd2c78c96461cfc46a&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Amira,

  • Each image div wrapper have padding top & bottom of 10px = 20px total
  • Both columns - Left and Center ones have inside of it 2 each = 2*20 = 40px
  • Right column have 3 images = 3*20=60px

btw-

  1. Most of the images on that page weighs more than 700kb, multiply that by 7 images on this page = 5mb. That is a lot!!! Images should be compressed and resized to the actual size the are displayed in (or maximum double for retina use).
    A good practice would be:
  • Optimal file size: Large images or full-screen background images should be no more than 1 MB
  • Most other small web graphics can be 300 KB or less
  1. You should use the same class names to elements that behave the same. I really can’t recommend enough the Webflow University tutorials for Designers who want to learn how to build websites. https://university.webflow.com/article/classes
1 Like

Hi there - sorry I am back - went and accounted for the 3rd images padding, however the bottom image is still not flush with the other two columns.
Column 1 adds to a height of 1516mm (image1 569mm, image2 907mm plus 40mm padding)
Column 2 also adds to 1516mm ( image1 712mm, image 2 764mm plus 40mm padding)
Column three includes 3 images (437mm + 663mm + 356mm + 60mm for the padding) This should also add to 1516mm - the same as column 1 and 2.
But frustratinglly its still out a bit at the bottom of column 3. Do you have any idea what this is?

I also fixed up image sizes.
Thanks in advance,
Link: https://preview.webflow.com/preview/studio-east?utm_medium=preview_link&utm_source=dashboard&utm_content=studio-east&preview=063461a63d2b2ddd2c78c96461cfc46a&mode=preview

I still see 10px paddings on all of the images wrapping divs.
What exactly did you change?