Reformat Footer in Dawn Theme

Store Design
, , , , , ,
1

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):

guisemen_1-1713316915103.png
guisemen_1-1713316915103.png2049×1163 190 KB

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

guisemen_0-1713316901392.png
guisemen_0-1713316901392.png1015×1331 99.6 KB

My site: https://guisemen.com/

2

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

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

4

Add This Css In your Base.css File

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