@blublu , if you want this on mobile
Please change the previous code like this
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.
1 Like