Create 3 column footer in brine template

Site URL: https://www.annasassi.com/

Hi,

I'm trying to create a 3 column footer design on my website.

The column design option doesn't get the result I want. And I haven't found any code that works.

I've attached a screenshot of how I would like it to look on desktop. On mobile I'd like the footer blocks to remain stacked.

Is this possible?

Thanks

2 hours ago, asassi said:

Site URL: https://www.annasassi.com/

Hi,

I'm trying to create a 3 column footer design on my website.

The column design option doesn't get the result I want. And I haven't found any code that works.

I've attached a screenshot of how I would like it to look on desktop. On mobile I'd like the footer blocks to remain stacked.

Is this possible?

Thanks

Hope it work well for you by adding some customization in Design > Custom Css

 @media only screen and (min-width: 768px) {
  .Footer-inner {
    display:flex;
    position: relative;
  }
  .Footer-blocks--top {
    order: 2;
    flex: 1;
  }
  .Footer-middle {
    display: flex;
    order: 1;
    flex: 2;
  }
   
   .Footer-blocks--middle {
     flex: 1;
   }
   
   .Footer-nav {
     flex:1;
   }
   
   .Footer-nav-group {
     height: 100%;
     display: flex !important;
     flex-direction: column;
   }
   
   .Footer-blocks--bottom {
     position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
   }
   
} 

In Desktop

Mobile

Amazing! that worked really well thank you 🙂

Do you know how I can add a heading in the navigation block? - see screen shot attached. 

Doesn't need to be there for mobile.. but don't mind if it is

Thanks

@HoaLT sorry my previous post may not have been very clear..

Do you know how I can add a heading to the navigation block? So that it reads 'Info' above the links.

Doesn't need to be there for mobile, but ok if it is.

Thank you for your help 🙂

@asassi It looks like you figured it out? I see "Further information" title now

Yes got it sorted. Thanks