Jump to content

Fluid engine spacing

Recommended Posts

Is there a way to create consistent spacing across fluid engine and all the breakpoints. I find that I can get it to look okay for my images and text on desktop and mobile but then when I resize the window the spacing between the various elements goes a bit haywire. I am currently trying to fix these in between area but as soon as I've fixed one, I've broken another so it's a constant battle.

Maybe I am just not understanding how to use it properly but I'd love to be able to choose my spacing and that it keeps that across all breakpoints.

If anyone had any advice, I'd love to hear it or maybe point me in the direction of a good tutorial if I am missing something. Thanks!

Link to comment

Can you share your website URL and some examples of where you've been having issues getting it to work?

Squarespace tends to be quite dynamic in the spacings around content and sections, and designing a desktop experience that is prepared to cope with the ~50% width you get on tablets is key to making it look good on all screens. I find that I need to be accepting of the limitations, and design with more leeway than I think I need on desktop, e.g. giving text blocks room for the text to grow in height (number of lines).

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (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

Hi Ziggy and thanks for the reply! The website is https://www.peterotoole.ie

I've managed to get it to an okay (ish) state at the moment but the spacing is still off in some cases. I'd love if I could set the spacing from the text box to the image(s) for e.g to remain the same irrespective of what size screen I am viewing the page. Not sure that's possible?

I'd say there are many reasons for the spacing issues but one of the issues appears to be the text box which expands depending on the screen size which makes sense but in some cases it over-expands and creates extra spacing as a result. You can see this in the screenshot below.

I'd really appreciate any advice as I could very well not fully understand how to use this feature properly. Thanks!

Screenshot 2023-02-10 at 5.09.30 p.m..png

Link to comment
On 2/10/2023 at 5:13 PM, niteshifte said:

in some cases it over-expands and creates extra spacing as a result

Yes, I've seen this, it's basically because the block has to be an integer number of rows, so sometimes is almost a whole row too large. Aligning the contents in the block to the center can help even out this spacing effectively by splitting the difference between the top and bottom, but that's not always the solution you want.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (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

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.