How to customize Footer layout Dawn theme

Hi, can someone please help me to customize the layout (only) of footer section, I couldn’t find anything helpful so far on the internet:

:cross_mark: My footer layout looks like this, About us and Customer Care section are way far from each other and Subscribe/ Newsletter section in at the bottom:

:white_check_mark: And I want it to look like this, About and Customer care sections are on the left and there is Follow us section and Subscribe/ Newsletter section is on the right:

I only want to customize the layout but I want to keep the style of Dawn theme.

Thank you!!

1 Like

Hi @arutze ,

Im not sure if itsl ike this you want.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.footer__content-top.page-width {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    margin-top: 0px;
}
.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {padding-right: 150px;}
@media screen only (min-width: 850px){
.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {padding-right: 150px;}}

Result:

i hope it help.

1 Like

Hi! Thanks a lot for your help, it is actually what I needed. Only thing, is it possible to move the Newsletter section to the right hand side?

Hi, Try this one.

@media only screen and (min-width: 950px){
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    margin-right: 25%;
}
}

Result:

Hey,

Thanks a lot, it indeed helped!

1 Like

Welcome! :blush:

1 Like