Dawn Theme: Footer padding in line with Header

Store Design
,

Topic summary

A user seeks to align footer padding with header elements in the Dawn theme, specifically matching the footer menu text with the “HOME” header text position.

Initial Solution:

  • A CSS code snippet was provided to add left padding (1.2rem) to footer menu items for desktop view
  • The code targets .footer-block__details-content .list__menu-item.list__menu-item .list__menu-item__link within a media query for screens with minimum width of 750px
  • This successfully resolved the desktop alignment issue

Outstanding Mobile View Requirements:
The user now needs mobile-specific adjustments:

  • Footer menu left-aligned with hamburger menu start
  • “JOIN US DOWN MEMORY LANE” heading aligned with hamburger menu
  • Email input box width extended to align with hamburger menu start and shopping cart
  • Social media icons aligned with hamburger menu start

Images were shared showing the desired mobile layout. The discussion remains open, awaiting mobile-specific CSS solutions.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hi - I would like to add padding to the left side of my footer so its in line with my header wording (“HOME”) or is there any other way to get my footer menu wording (left only) to be in line with the header? Please see below :slightly_smiling_face:

Ankita31_0-1668816558590.png
Ankita31_0-1668816558590.png2277×1211 118 KB

Store: www.smara.co.uk

Thank you,

Ankita

1 Like
2

Hi @Ankita31

Your website is password protected. Are you able to provide the password?

3

Hi @made4Uo thank you for coming back to me :slightly_smiling_face:

ofcourse, have sent you a msg :slightly_smiling_face:

4

Hi @Ankita31

Sorry for the delay. You can use the code below to align the footer.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
@media screen and (min-width: 750px){
.footer-block__details-content .list-menu__item.list-menu__item--link {
    padding-left: 1.2rem;
}
}
1 Like
5

Hi @made4Uo

This worked! :slightly_smiling_face:

Please can you help me with mobile view too? I would like the footer to be aligned as per below:

  1. Footer menu left align, in line with start of hamburger menu

  2. “JOIN US DOWN MEMORY LANE” left align, in line with start of hamburger menu

  3. Email address box to fill the page - in line with the start of the hamburger and in line with shopping cart

  4. Social media icons left align, in line with start of hamburger menu

Ankita31_0-1669077031386.png
Ankita31_0-1669077031386.png358×717 55.6 KB

Please see the example below:

Ankita31_1-1669077500471.png
Ankita31_1-1669077500471.png854×887 48.5 KB

Thanks so much in advance,

Ankita

@Litos