Tricky Footer Layout 7.1 - need help to reorder blocks

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!

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

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!

 

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

My testing result

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!

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?

On 11/19/2021 at 2:42 PM, bangank36 said:

Is it the result you intend to?

Hi @bangank36 Sorry I missed your last reply.

I would like the Esomar logo sitting next to the MRS Evidence Matters Logo below the Satya logo.

Is this possible?

Sorry me again! I also wanted to know if it possible to center the 2 columns of link (including the LI link) ?

Thanks

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

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