jjk291 Posted March 31, 2023 Share Posted March 31, 2023 Hi! So for my portfolio homepage, I have staggered image blocks in different sizes with captions added using a text block. Every section has different block padding in order for the entire image to be shown/fit. With that said, the padding in between the images and caption texts are different between every image. It's very subtle but the difference is there. Is there a way I can adjust the padding between them so it is consistent without adjusting the way the images are presented? This is only needed for the homepage. https://harp-cobalt-g6lj.squarespace.com/ Password: blueberry2 Much appreciated! Link to comment
jjk291 Posted March 31, 2023 Author Share Posted March 31, 2023 Attached is a marked up screen shot for clarification 🙂 Link to comment
Ziggy Posted March 31, 2023 Share Posted March 31, 2023 It looks like you've customized the row-gap and column gap on those sections, (5px & 7px, and, 8px & 3px respectively), this explains the 3px difference in padding. If you adjusted this to be the same, you will have the same padding. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
jjk291 Posted March 31, 2023 Author Share Posted March 31, 2023 (edited) The problem is I cannot adjust the row-gap and column gap to be same or else it will crop the images in a strange way. I have the images on "fill" as when I use "fit" it leaves space around the edges of the image and does not allow the text to align correctly. Is there a way to adjust the padding while leaving the row and column gaps the way it is in each respective sections? Edited March 31, 2023 by jjk291 Link to comment
Ziggy Posted March 31, 2023 Share Posted March 31, 2023 10 minutes ago, jjk291 said: Is there a way to adjust the padding while leaving the row and column gaps the way it is in each respective sections? No, it's not padding, it's the row gap that is causing the space, so you need to fix that. Instead of having the images set to fill (which causes cropping issues that I can see on smaller screens) set them to fit, and then change the alignment to bottom to give an even space to the text. jjk291 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
jjk291 Posted March 31, 2023 Author Share Posted March 31, 2023 that works!! thanks so much!!! didn't realize there was a way to align to bottom. Ziggy 1 Link to comment
Ziggy Posted March 31, 2023 Share Posted March 31, 2023 4 minutes ago, jjk291 said: that works!! thanks so much!!! didn't realize there was a way to align to bottom. Glad that worked for you! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
jjk291 Posted March 31, 2023 Author Share Posted March 31, 2023 Ive come across a new problem now using this method at small screen sizes. The text will not align with the image. and when I have the image fit right to have it align with the text, everything is pushed to the right of the title which looks strange. See attached. Is there a solution to this besides centering the text? Link to comment
Ziggy Posted March 31, 2023 Share Posted March 31, 2023 Have you adjusted the mobile layout? You can make that block taller so it fills more space, and adjust the left/right + top/bottom alignment. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
jjk291 Posted March 31, 2023 Author Share Posted March 31, 2023 The mobile layout looks great - see attached. its the desktop version for small screen that looks bad. it also has the misalignment when viewing on my iPhone turned horizontally. Link to comment
Ziggy Posted March 31, 2023 Share Posted March 31, 2023 Strange, I can't seem to replicate that view to know what's going on there. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
jjk291 Posted March 31, 2023 Author Share Posted March 31, 2023 It shows up when you make the desktop window smaller. It seems like the responsive design is formatting it strangely when its smaller. Is there way to force it into mobile mode before it gets to the size that makes it misaligned? Link to comment
Ziggy Posted March 31, 2023 Share Posted March 31, 2023 I'm changing the screen size in every way, can't see it doing that. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
jjk291 Posted March 31, 2023 Author Share Posted March 31, 2023 hmmm it's happening to me on 3 different Mac devices. On my desktop and see attached my iPhone when its turned horizontally Link to comment
Ziggy Posted March 31, 2023 Share Posted March 31, 2023 From that image it looks like you need to leave a row of space at the image. tuanphan 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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