Reformat Footer in Dawn Theme

[guisemen]

Hi there,

I'm hoping to adjust the footer of my theme (Dawn).  Below I've included mocks of what I'd like the new footer to look like (just made these in Powerpoint).

If there's anyone out there who can guide me on how to do this, it would be a HUGE help.

Thanks so much.

Desktop:
Vertically align the logo in its container.  Move the newsletter to the right side.  Place social icons underneath.  Match the font size and color of "Help Center" to the other text (not pictured):

Mobile:
Move the newletter box to the top, place the two columns of text below.

My site: https://guisemen.com/

[Raj-WebDesigne · Accepted solution]

Add This css in your Base.css File

@media screen and (min-width:750px){
    .footer__content-top .grid{
        gap:50px;
        align-items:center;
    }
    .footer-block--newsletter{
        align-items: center !important;
        width: 80%;     
        flex-direction: column !important;
    }
    .footer__content-top {
      display: flex !important;
      align-items:center;
      gap:80px;
    }
    .footer-block__newsletter{
        min-width: 100%;
    }
}
@media screen and (max-width:750px){
    .footer a.link.link--text.list-menu__item.list-menu__item--link {
        white-space: nowrap;
    }
    .footer .grid {
        display: grid !important;
        gap: 40px;
        margin: 0 auto;
        max-width: 50%;
    }
    .footer-block__details-content .list-menu__item--link {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 18px;    
    }
    .footer__content-top.page-width {
        padding: 0 15px;
    }
    .footer-block.grid__item:nth-child(1) {
        grid-row: 3 / 3;
        grid-column: 1 / 7;
    }
    .footer-block.grid__item.footer-block--menu {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }
    .footer-block.grid__item:nth-child(3) {
        grid-column: 4 / 7;
        grid-row: 2 / 3;
    }
    .footer__content-top {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
}
@media screen and (max-width:500px){
    .footer .grid {
        margin: 0 auto;
        max-width: 100%;
    }
}

[guisemen]

Incredible -- thank you, thank you!  Is there an easy way to hide the logo portion on mobile?  Very much appreciate the hand.

[Raj-WebDesigne]

Add This Css In your Base.css File

@media screen and (max-width:767px){  
 .footer-block.grid__item:nth-child(1) {
     display: none;
  }
}