Fabric Theme: Put two columns of text next to each other in the footer

Topic summary

Goal: Place two text blocks side-by-side (two columns) in the Fabric theme footer instead of stacked.

Proposed fix (CSS Grid):

  • Navigate to Online Store → Edit Code → theme.liquid.
  • Add a block just above the closing tag that targets:
    footer .group-block-content.layout-panel-flex.layout-panel-flex–row.mobile-column
  • Apply: display: grid; grid-template-columns: 1fr 1fr; (with !important to override defaults).

Outcome: Footer content renders in two equal-width columns rather than a single stacked column.

Notes:

  • The solution uses CSS Grid (a layout system that defines columns/rows) to force a two-column layout.
  • Images were provided to illustrate the desired layout and the final result.

Status: Resolved with a working CSS snippet; further assistance offered if needed.

Summarized with AI on December 10. AI used: gpt-5.

hi there, i would like to put two columns of text next to each other instead of stacked in the footer

thanks!

Hey @hausofmossandmoon

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
footer .group-block-content.layout-panel-flex.layout-panel-flex--row.mobile-column {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like

hey thank you so much, is there a way to make this happen only on mobile?

1 Like

Add this updated code with the same steps mentioned above

<style>
@media screen and (max-width: 767px) {
footer .group-block-content.layout-panel-flex.layout-panel-flex--row.mobile-column {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}
}
</style>

Cheers,
Moeed

1 Like