How can I adjust footer block width on Craft Theme?

Topic summary

Goal: Adjust the widths of three footer blocks (two menus, one text) in the Shopify Craft theme so menus are narrower and the text block is wider.

Context and steps:

  • Support first requested the store URL/password to assess; the user shared https://ravenscraftsdecor.com.
  • Solution provided via theme CSS: edit Online store > Themes > Actions > Edit code, open theme.css or base.css, and add custom rules.

Key CSS approach (central to the fix):

  • Target footer blocks by position using .footer-block:nth-child(1/2/3).
  • Use flex to set relative widths with percentages (e.g., 10%, 50%, 25%), which can be adjusted as needed.
  • Optionally tweak list item spacing with .footer-block li { padding: 20px 0 !important; }.

Explanation:

  • nth-child selects each footer column by order.
  • flex: 1 1 X% sets flexible columns with a preferred width (X%).

Outcome:

  • The original poster confirmed the changes worked.
  • Another participant reported the solution provided the flexibility they needed.

Status: Resolved; no outstanding questions.

Summarized with AI on January 13. AI used: gpt-5.

Thank you, our website URL is : https://ravenscraftsdecor.com