Jump to content

Splitting part of your footer into two columns?

Recommended Posts

  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

If you upgrade and build the footer in Fluid Engine you have a mobile specific editing option with an 8 column grid, so you can do whatever you want in terms of column layouts. You could also achieve the same thing with a single code block with CSS grid for the two columns, that way you maintain the columns on mobile. 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
8 hours ago, Ziggy said:

If you upgrade and build the footer in Fluid Engine you have a mobile specific editing option with an 8 column grid, so you can do whatever you want in terms of column layouts. You could also achieve the same thing with a single code block with CSS grid for the two columns, that way you maintain the columns on mobile. 

Would you mind sharing the single code block with CSS? I'm not really wanting to upgrade that section to the fluid engine yet.

Link to comment

Add the HTML in a code block in place of the two text blocks. You'll have to replace the placeholder text with your text and links.

HTML:

<div class="grid2">
     <div class="grid2-item">
        <p class="preFade fadeIn">Column One</p>
        <p class="preFade fadeIn">Column One</p>
        <p class="preFade fadeIn">Column One</p>
      </div> 
      <div class="grid2-item">
        <p class="preFade fadeIn">Column Two</p>
        <p class="preFade fadeIn">Column Two</p>
        <p class="preFade fadeIn">Column Two</p>
      </div> 
</div>

Add this to your Custom CSS:

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px;
  gap:20px;
}
.grid2-item {
  text-align: left;
}

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
On 9/7/2022 at 12:59 PM, jdunc said:

Site URL: https://www.lettersandlines.co

Hello. Is there a way to put 2 of the lists in my footer side by side on mobile only? I don't want everything in 2 columns, just "Look Around" on the left and "The Shop" and "Need a contractor" on the right hand side. Thx!

 

password: Letters123

Password is incorrect

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 9/7/2022 at 5:25 AM, Ziggy said:

If you upgrade and build the footer in Fluid Engine you have a mobile specific editing option with an 8 column grid, so you can do whatever you want in terms of column layouts. You could also achieve the same thing with a single code block with CSS grid for the two columns, that way you maintain the columns on mobile. 

Ziggy, have you actually tried this in Fluid Engine? It is not working for me AT ALL. I am trying to form two columns on mobile view only. My blocks move around arbitrarily from where I place them and dozens of extra rows keep getting auto-added. Enormously frustrating. If you can do it successfully, then I'll know it's purely operator error but gosh is it FRUSTRATING aargghh

Link to comment
13 hours ago, juliaprather said:

My blocks move around arbitrarily from where I place them and dozens of extra rows keep getting auto-added. Enormously frustrating. If you can do it successfully, then I'll know it's purely operator error but gosh is it FRUSTRATING aargghh

I have done it successfully, but that's not to say that I haven't had exactly the same issues with blocks moving around poorly, rows being added automatically, block selections not working correctly, and generally a buggy experience. It does seem to be better on sites created from scratch with FE, rather than converting, but I still get problems on occasion that scupper my efforts, with patience and limiting what I do, I can normally get the look, but that's very much a hassle and not an experience I would recommend. It is not operator error on your part.

If you'd like me to have a quick go at building this in your footer, you can send me a contributor invitation and I will see if I can help.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
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.