brendandelany Posted February 15, 2022 Share Posted February 15, 2022 (edited) 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; } Edited February 15, 2022 by brendandelany adding password Link to comment
Solution paul2009 Posted February 15, 2022 Solution Share Posted February 15, 2022 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. meganheath 1 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
brendandelany Posted February 15, 2022 Author Share Posted February 15, 2022 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). tuanphan 1 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