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
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-
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
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. Classes | Webflow University
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?