Problems with white space under images in a row

Design help General
1

Hi!

I’m doing my portfolio but having trouble aligning my projects. I want to have them 3 in row, but with different sizes; 60% + 20% + 20% = 100% and then mix them up a bit, maybe doing 20% + 60% + 20% = 100%.

However…the 20% image won’t line up with the 60% images. I get a white space below them.
All images has a height of 400px setup in Photoshop.

But…how do I get rid of that white space below?

Here’s a link you can take a look at:
https://webflow.com/design/newportfolio?preview=36a5997db9eda98547328284d2852ad6

Thanks in advance!

2

I figured out I could solve it by adding a padding of -13…but…is that…right?

3

i fixed it. you got your layers kinda jumbled. watch this video to see how to fix it.

4

Thanks! But I don’t think you understood me…I earlier “temporarily” fixed my problem by adding some negative padding, but that should not be necessary…should be fixed the “right” way. Now I’ve deleted the negative padding and this is how it looks at the moment:

1920×1080 384 KB

5

your image heights are different.

the screenshot of CNBC is shorter than the photo of the phone.

6

Nope, they both have a height of 400px. Checked in Photoshop.