Splitting part of your footer into two columns?

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

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. 

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.

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;
}

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

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

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.