Jump to content

Tricky Footer Layout 7.1 - need help to reorder blocks

Recommended Posts

Site URL: https://www.satya-consult.squarespace.com

Hi 

I'm struggling to get a footer to stack the way it looks on desktop. My client has a very specific layout and I am trying to get it as close as possible. I've tried lots of different CSS but none are quite doing it!

 

1003793936_Image18-11-2021at13_49.thumb.jpg.89de8ecc404b75f3d589b0e5f444cb76.jpg

For the mobile view :

He wants the 2 blocks of links side by side centered (with LI icon under the 2nd block).

Then the Satya logo

Then the 2 brand icon images (Esomar and MRS)

And finally the Terms and Conditions etc at the bottom.

Any help to create this very gratefully received!!

Thanks

 

website: www.satya-consult.squarespace.com

Password: satya

 

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, cjp2380 said:

Site URL: https://www.satya-consult.squarespace.com

Hi 

I'm struggling to get a footer to stack the way it looks on desktop. My client has a very specific layout and I am trying to get it as close as possible. I've tried lots of different CSS but none are quite doing it!

 

1003793936_Image18-11-2021at13_49.thumb.jpg.89de8ecc404b75f3d589b0e5f444cb76.jpg

For the mobile view :

He wants the 2 blocks of links side by side centered (with LI icon under the 2nd block).

Then the Satya logo

Then the 2 brand icon images (Esomar and MRS)

And finally the Terms and Conditions etc at the bottom.

Any help to create this very gratefully received!!

Thanks

 

website: www.satya-consult.squarespace.com

Password: satya

 

Hi,

Try adding to Home > Design > Custom Css

/*Footer arrange layout in mobile*/
@media only screen and (max-width: 767px) {
  section[data-section-id="61701175402a0f5783dd5f80"]  .content > .sqs-layout > .row {
    display: flex;
    flex-direction: column;
  }
  section[data-section-id="61701175402a0f5783dd5f80"]  .content > .sqs-layout > .row > .col > .row > .span-1{
    display: flex;
    flex-direction: column;
  }
  section[data-section-id="61701175402a0f5783dd5f80"]  .content > .sqs-layout > .row > .col:nth-child(2) {
    order: 3;
  }
  section[data-section-id="61701175402a0f5783dd5f80"]  .content > .sqs-layout > .row > .col:nth-child(3) {
    order: 2;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

image.png.aa542129157804168a654064de6f404d.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 hours ago, cjp2380 said:

Thanks so much @bangank36. That's great. 

I've reduced the 2 logos Esomar and MRS - is there a way of moving them so they are next to each other on one line.

Also is there a way of centering the whole footer?

Appreciate your help!

Is it the result you intend to?

image.png.f8d2fecfe70d2ea5ac9602a5fa85c627.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hi @tuanphan

I'm having a problem finishing a footer to get the look a client wants.

They ideally want everything centered.

So the layout would be 

Column Column
Satya Logo
Esomar logo MRs Logo  - they want these side by side
Terms and Conditions etc links

I've tried a few things but I can't center the 2 columns and I can't get the 2 smaller icons to sit on the same line.

Can you offer any solutions?

Any help gratefully received!

Thanks

 

website is: satya-consult.squarespace.com

password: satya

Edited by cjp2380
Link to comment
On 11/23/2021 at 5:37 PM, cjp2380 said:

Hi @tuanphan

I'm having a problem finishing a footer to get the look a client wants.

They ideally want everything centered.

So the layout would be 

Column Column
Satya Logo
Esomar logo MRs Logo  - they want these side by side
Terms and Conditions etc links

I've tried a few things but I can't center the 2 columns and I can't get the 2 smaller icons to sit on the same line.

Can you offer any solutions?

Any help gratefully received!

Thanks

 

website is: satya-consult.squarespace.com

password: satya

Hi

It looks like you figured some things

To make 2 icons same line, add this CSS

/* Mobile footer icons side by side */
@media screen and (max-width:767px) {
div#page-section-61701175402a0f5783dd5f80 .span-4 .row:nth-child(2) .span-1 {
    width: 30% !important;
    float: left !important;
}
div#page-section-61701175402a0f5783dd5f80 .span-4 .row:nth-child(2) .span-1 .image-block {
    width: 70%;
}
}

 

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

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.