Dawn theme Desktop footer customization - urgent

Store Design
, , , , , , , , , ,

Topic summary

A user seeks to fix uneven spacing between sections in their Dawn theme desktop footer, specifically between brand information and menu items.

Problem: Footer content appears unevenly distributed across the desktop layout (screenshot provided showing the issue at 2512.in).

Proposed Solutions:
Three community members offered CSS-based fixes:

  • Solution 1: Add custom CSS to theme.liquid before the </body> tag (specific code snippet provided with before/after screenshot)
  • Solution 2: Apply media query targeting screens 750px+ with padding-inline: 15px to .footer-block elements
  • Solution 3: Modify base.css with media query for screens 991px+ setting footer wrapper width to 100% (includes result screenshot)

All solutions involve adding CSS code through the theme editor. The discussion remains open as the original poster has not confirmed which solution worked.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I want to customize my Dawn theme website’s desktop footer. Currently, the spacing between sections is uneven. How can I equally space the content, such as brand information and menu items?

website : https://2512.in/

Screenshot 2025-05-03 112547.png
Screenshot 2025-05-03 112547.png1919×397 42.8 KB

Thanks in advance

1 Like
2

Mustafa_Ali_0-1746253971358.png
Mustafa_Ali_0-1746253971358.png1214×338 31.8 KB

hope you like it

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
if this code work please do not forget to like and mark it solution

3

Hi @Sivadarshan

let try to add custom css below:

@media screen and (min-width: 750px) {
  .footer__blocks-wrapper > .footer-block {
    padding-inline: 15px;
  }
}
4

Hello @Sivadarshan
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (min-width: 991px) {
.footer .footer__blocks-wrapper {
width: 100% !important;
}
}

result

15.png
15.png1366×372 41.6 KB

If this was helpful, hit the like button and accept the solution.
Thanks