How can I modify the footer layout in the Dawn theme?

[bossbabecreativ]

Hello!

I'd like to turn my footer menus into side by side columns (left aligned). I'd also like to slightly reduce the spacing between each menu link.

I need the newsletter form, it's title and the social icons centered on mobile and then lastly move that whole newsletter section up, underneath my logo (so the column menus are underneath). 

Something similar to this 

I would also love add a paragraph underneath my newsletter title (on mobile and desktop). For some reason it doesn't give me that option in the theme customizer.

I am using the Dawn theme

https://www.poshdforever.com/collections/nails/products/moo-dy

Thank you in advance for any help!

[oscprofessional]

@bossbabecreativ ,

I have gone through your store, it looks nice.

As you have asked about add paragraph, you have to check liquid file for footer and add the text according to you.

.footer-block.grid__item.footer-block--menu {
    width: 50%;
    float: left;
}
a.link.link--text.list-menu__item.list-menu__item--link {
    padding: 2px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->section-footer.scss.liquid

[spookiesdream]

Hi,

I'm trying to move the Newsletter to the right as a 4th column in the footer. and add the social media icons just under the newsletter box.

Would you please help me?

https://theoverlandco.myshopify.com/

password is: landover

Thanks a lot!

[SanDee222]

Can you please help me? I have added all of that code and it still didn't work for me. The most it did was created another column and placed the EMAIL box at the top. I have been trying for so long, but nothing appears to be working. I don't know if I have code somewhere else overriding the other but please help me if you can.

[spookiesdream]

Hi, your footer looks great, how did you make it? Would you share with me as well? Thanks a lot!

[bossbabecreativ · Accepted solution]

I paid someone to fix the coding for me. Here is what was added:

Under Assets > base.css paste this code at the bottom:

.footer__content-top.page-width {
display: flex !important;
}
.footer-block--newsletter {
display: block !important;
}
.footer-block--newsletter {
margin-top:0 !important;
}

@media (min-width:991px){
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
flex-basis: 80% !important;
}
.footer-block.grid__item {
padding-left: 0 !important;
}
}

/**************************************************************************/

@media (min-width:992px){
.footer__content-top .footer-block--newsletter .footer-block__newsletter form#ContactFooter
{margin-left: 0 !important;}

.footer__list-social .list-social__item:first-child a{padding-left:0;}

}

@media (max-width:991px){
.footer__content-top.page-width {
flex-wrap:wrap !important; justify-content: center;}

.footer-block__newsletter .footer-block__heading{text-align:center;}

.footer__list-social.list-social {justify-content: center !important;}


}

@media (max-width:749px){

.footer-block.grid__item {margin: 0 !important;}

.footer__content-top .footer__blocks-wrapper{display: flex !important; flex-wrap: wrap;}

.footer__blocks-wrapper .footer-block--menu{width: calc(50% - 0.25rem) !important;}

.footer-block__details-content .list-menu__item--link {
padding-top: 0.5rem; padding-bottom: 0.5rem;}

.paragraph_newsletter{text-align:center;}

}

And then under Assets > section-footer.css paste this code at the bottom of the file:

.footer__content-top .footer-block--newsletter .footer-block__newsletter {
width: 100%;
text-align: left;
order: 2;
}

.footer__content-top .footer-block--newsletter {
display: flex;
flex-wrap: wrap;
}

.footer__content-top .footer-block--newsletter .footer-block__newsletter form#ContactFooter {
justify-content: left;
margin: auto;
}

.footer__content-top .footer-block--newsletter ul.footer__list-social {
justify-content: left;
}