Refresh Theme - Center & Stack Footer Menu On Mobile

Store Design

Topic summary

A user seeks help centering and stacking their Refresh theme footer menu into two columns on mobile devices, as it currently displays left-aligned in a single column.

Solutions Provided:

Two support teams offered CSS code solutions:

  • BSS-Commerce: Suggested adding CSS to base.css or theme.css using grid layout with grid-template-columns: 1fr 1fr and text-align: center
  • PageFly-Kate: Recommended adding CSS to section-footer.css with similar grid properties plus additional padding adjustments

The user confirmed PageFly-Kate’s solution worked perfectly.

Follow-up Issues:

  • User asked how to center the footer logo image on mobile (currently left-aligned)
  • PageFly-Kate responded but couldn’t see the logo in question
  • A new participant asked about reducing gaps between menu links and social media icons

Status: Initial centering issue resolved; logo alignment and spacing questions remain open.

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

hey how to reduce the gap between menu links and social media icons?