Jump to content

Homepage text

Recommended Posts

Site URL: https://www.nateburdette.com/

How can I center the body text ("I write and edit...") on my homepage? I'd like to make the text centralized on my homepage on both desktop and mobile. It looks decent on desktop using spacers, but the spacers evaporate on mobile and the content is pinned to the top. Any way to make it central through CSS or another way?

Here's a good benchmark of what I'm going for. I like how the body text ("Words and ideas") is centralized on both desktop and mobile: https://eriksena.com/

Thanks!

Link to comment
  • Replies 3
  • Views 314
  • Created
  • Last Reply

@BeeperChirp hey, not sure why you need to use spacers.  When you create a new section. Go to the Pencil Icon on the upper right-hand side of the section.  Select 'content-alignment' and set it to center. Your Text area should automatically be page center; Select H1 and Center Align in the on-page Text Editor Widget and you should have achieved the same results as if you were using Spacers. The result on Mobile should be centered also. 

- John

mcgouran.john@gmail.com

Link to comment

Hey thanks, @johnmd. I tried this and can't figure it out. It works well enough to center the text horizontally, but I'm also looking for a solution for to center the text vertically, too. 

Without spacers, it looks like this:

1304996118_ScreenShot2020-04-26at2_03_00PM.thumb.png.8846b46520eff4f71c7182c703e5edf6.png

 

With spacers, I'm able to align the text in the center of the page vertically (more or less) on desktop, like this: 

1343398217_ScreenShot2020-04-26at2_04_17PM.thumb.png.d95ca962819130cf8f1b19f19a330738.png

But on mobile, the spacers change and the text gets pinned to the top, like this: 

122374353_ScreenShot2020-04-26at2_04_51PM.thumb.png.0f00507d5e2f33e71fb6068f485943a7.png

I'm hoping to center the text vertically on mobile like this: 

IMG_3E3F07EFCB19-1.thumb.jpeg.381433f9cbb6d1aecf3a4604d985ed84.jpeg

 

Should the solution you have here work for this too? Works great for horizontal alignment! 

Link to comment

@BeeperChirp Hi, when you set up a new Section your text line should automatically be centered vertically on the page. I suggest that you delete your current section. You will see the ' add page content' prompt. Select the + sign and add select 'Add Blank +'.  Back on the Page, below the teardrop, you should have a default text editor positioned at Vertical Center. Write your header text; select H1 and Center Align in the text widget: Your resulting text should be centered on all screen sizes. You can then set your background color for the Section and make the section adjustments as mentioned previously. 

Note: If the text line is automatically starting at page top then go to the Section editor (pencil icon on the upper right-hand side) > Format > Content Alignment > set to the middle icon for centering.  You'll see the adjustment in realtime.  

mcgouran.john@gmail.com

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.