Lian Posted November 1, 2022 Share Posted November 1, 2022 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 Link to comment
Ziggy Posted November 1, 2022 Share Posted November 1, 2022 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). Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Lian Posted November 7, 2022 Author Share Posted November 7, 2022 Hi @Ziggythank you for your reply. Its exactly the problem with hover indeed. Ok, I'll try a different solution then. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment