How to create equal, responsive image blocks?

Site URL: https://www.schonlein.media/team

Hi all,

something that's bugging me for a really long time is that the image blocks of the team member page are not equal in height. While the first row adjusts just fine, also on smaller screens, the second row of image blocks does whatever it feels like.

I have googled to find specific coding to fix it, but so far I haven't been successful in customizing it. 

Could somebody help fixing this or guide me in the right direction? 

Hi @fbn

Aligning image and text blocks like you've done will create 3 columns. So the position of the bottom image is actually determined by the position of the content above it. This also means that on a mobile device "Josefine Wozniak's" image will display second because it is part of the first column of blocks. 

To make the image and text blocks appear the same you need to ensure that all image block and text block heights are the same. You have 5 lines of text for each team member except "Rebekka Emrich". So if you add another line of text or possibly even a space to that text block it will solve the issue.

Alternatively, you can add a full width space block below the first set of team members so it breaks the three columns. This will also change the order in which the blocks display on mobile.

Hope this helps.

breaking the columns with a horizontal spacer did the trick. Very easy solution - thanks a lot!