Jump to content

Equal Horizontal Spacing for Footer Elements

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://delanydesigns.squarespace.com/

Password: 123456

Hi! I’m a little new to working with Squarespace, though I have taken a class on HTML and CSS.

I’m trying to get the links in my footer to take up an equal amount of space horizontally, but I can’t figure it out. I remember learning that using percentages in CSS pertains to the container of whatever element you are adding style rules for, so for 4 links I’d think that “width: 25%;” should work. But, as you can see in the screenshot, I’m not at all getting what I want. Is there something that I’m missing, such as padding or margins or something taking up space and making those percentages not add up correctly?

Can someone help, please? Thanks!

(Also, in case it makes a difference, my site is currently not public because I’m just getting started on it.)

CSS:

Quote

div#block-f870ea3fe206be690057 {
  width: 25% !important;
}

div#block-yui_3_17_2_1_1644887303584_13576 {
  width: 25% !important;
}

div#block-yui_3_17_2_1_1644887303584_16476 {
  width: 25% !important;
}

div#block-yui_3_17_2_1_1644887303584_17415 {
  width: 25% !important;
}

 

Screen Shot 2022-02-14 at 8.19.50 PM.png

Edited by brendandelany
adding password
Link to comment
  • Solution

Unless I have misunderstood your question, you shouldn't need any code for this.

Simply add four Text Blocks to the footer. You can then add your links to each of the blocks. They will be spaced equally and will 'collapse' when the site width is reduced, keeping them responsive. Here's a video

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
12 hours ago, paul2009 said:

Unless I have misunderstood your question, you shouldn't need any code for this.

Simply add four Text Blocks to the footer. You can then add your links to each of the blocks. They will be spaced equally and will 'collapse' when the site width is reduced, keeping them responsive. Here's a video

Thanks! That’s helpful, and I think it helps me solve my issue pretty well.

I just wish Squarespace’s layout editing tools included more advanced features like smart guides (basically what Illustrator and InDesign have).

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.