Jump to content

How to create equal, responsive image blocks?

Recommended Posts

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? 

Bildschirmfoto 2022-02-10 um 13.07.15.png

Link to comment
  • Replies 2
  • Views 331
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

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.

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.