Solved

Reformat Footer in Dawn Theme

guisemen
Excursionist
31 2 3

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

 

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

 

guisemen_0-1713316901392.png

 

My site: https://guisemen.com/

 

-Will
Accepted Solution (1)

Raj-WebDesigne
Shopify Partner
60 16 14

This is an 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%;
    }
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 3 (3)

Raj-WebDesigne
Shopify Partner
60 16 14

This is an 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%;
    }
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


guisemen
Excursionist
31 2 3

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

-Will
Raj-WebDesigne
Shopify Partner
60 16 14

Add This Css In your Base.css File

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

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com