Sidebar to footer

Hi.
New day, new question. Is it possible to move the sidebar to the footer, if I make the page full width? Or do I need a custom made CSS-code for that?

http://www.christinefagerbakke.com/

Regards,
Seigedamen

Hi Seigedamen,

I hope you are well today and thank you for your question.

New day, new question. Is it possible to move the sidebar to the footer, if I make the page full width?

No you have to develop custom PHP code to achieve this.

Or do I need a custom made CSS-code for that?

Yes

Could you please share me the pages URLs from your site where you want to display sidebar in the footer so that i can help you to achieve it?

Kind Regards,
Movin

Hi!
Thanks for the answer. It is the same URL as the one in the original post (http://www.christinefagerbakke.com/) I would like the sidebar to be “as a footer” all the time. If it is possible. So I would like the site to be full width, like this: http://www.christinefagerbakke.com/2016/09/24/ventetid-rust-og-saltvannshar/, but having this sidebar (I don’t need all the elements): http://www.christinefagerbakke.com/ on the bottom.

If that makes sense?

C.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS


div#secondary,
.main-content-inner.col-sm-12.col-md-8.side-right {
    width: 100%;
}

Thanks so much for the code and help!

Now everything is underneath each other, is it possible to have each widget next to each other? Three or four different ones maybe? I uploaded two print screens to show precisely what I am thinking. The first is the footer which I have in mind, the second is how my footer looks right now.

You can try achieving this by using the below CSS code.

div#secondary {
    width: 100%;
}
#secondary .widget {
    float: left;
    width: 23%;
    margin: 0 1%;
}
#secondary .widget:first-child,
#secondary .widget:last-child{
    margin: 0;
}
#secondary .widget:nth-child(4n+1){
  clear:both;
}