Fooer menu first item not aligned - dawn theme

Topic summary

A user encountered footer menu alignment issues in Shopify’s Dawn theme, where the first menu item appeared misaligned vertically and the menu wasn’t centered horizontally.

Initial Solutions Offered:

  • Multiple support representatives (BSSCommerce-HDL, BSSCommerce-B2B, Made4uo-Ribe) provided CSS code snippets to add to theme.liquid or main.css files
  • Solutions focused on adding padding-top adjustments to the first child element using media queries for screens 750px and wider

Complications:

  • Initial fixes resolved desktop alignment but caused mobile stacking issues
  • The menu became left-aligned instead of centered after some attempts
  • User reported mixed results with different code variations

Final Resolution:

  • User successfully resolved both issues using ChatGPT’s assistance
  • Final solution combined flexbox properties (display: flex, justify-content: center, align-items: center) with the padding-top fix
  • This approach centered the menu horizontally while maintaining proper vertical alignment of all items

The discussion demonstrates iterative troubleshooting of CSS alignment issues across responsive breakpoints.

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

@blublu , if you want this on mobile

Please change the previous code like this


1 Like