Jump to content

Center-Align text blocks in a section w/Fluid Engine

Recommended Posts

Posted

Hi there,

I am trying to align a title and a text block, vertically centered within a section. I would like the text to be vertically centered with the slider image on the left side of the page, and both the images and the text centered vertically in the section

It looks centered when Editing (Fluid Engine), however, when I save it is not centered. 

1. Settings:

  • Fill the Screen or do not Fill the Screen - does not seem to matter which setting I use here
  • Gaps / No Gaps / Custom Settings for Gaps - does not seem to matter, none of these settings impact the vertical centering I am looking for

The attached screen shots show:

1. the editing window

2. the final view

here is the actual page:  https://www.creative-content-marketing.com/portfolio-2/principal-building-designer-website

(site is under construction/not complete)

Last: how do I get rid of that huge white space at the bottom of the section??

Somewhat frustrated with Fluid Engine and aligning elements on the page. Very time consuming.

 

thanks very much!
Elaine

 

 

Screen Shot 2022-10-25 at 1.56.02 PM.png

Screen Shot 2022-10-25 at 1.56.47 PM.png

  • Replies 1
  • Views 906
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted

Firstly I would put all of the text into one block rather than two. Then set it to center aligned vertically in the block settings.

As you can see below in the screenshot, the purple dots show the grid, and the third row is being stretched by the image plugin. 

image.thumb.png.5d90c8e0e4ad798019f8c61bbe98bf34.png

Given this, you want to make sure the text block is spanning the same 3 rows and it will stretch the same way, and the center vertical alignment should do the rest!

Fluid Engine takes some learning, but if you're offering Squarespace website design it's worth spending some time learning the ins and out and best practices, it's worth it for the added flexibility and ability to have a mobile specific layout!

The white space is firstly from 3 blank rows at the bottom of the before/after section, then a little from the section padding for both the sections (which can easily be removed), and then from a blank row at the top of the next section.

Hope that all helps, and good luck with FE!

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?

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.