Image size

Hi, 

Can anyone help me with the following problem. 

In the editor mode these pictures are aligned. 

But when I try preview mode, the pictures are not aligned anymore. How can I tackle this problem?

Its about this website: https://platform-allround.squarespace.com/projecten

PW: Platformallround12

Hi @Lian, this is a pretty common responsive design issue stemming from the width being different when you're editing and viewing, and the problem get more pronounced as the screen narrows (before jumping to mobile view). It is occurring because you have fixed ratio images and fixed px padding around the images, as the screen width gets smaller the images shrink to fit the space, but the padding remains the standard 17px around each block, and you see a different in heights. Using a gallery grid is normally a good way to fix this, but probably wont offer you the same ability to add the hover effect that you have. Moving to Fluid Engine would allow you to have the images fill a space within the grid stopping them from becoming misaligned, but you would have to have a different solution for the hover (probably a text block filling the same space plus a background and then a hover effect applied to the blocks).

Hi @Ziggythank you for your reply. Its exactly the problem with hover indeed. Ok, I'll try a different solution then.