How can I format my Craft theme footer into columns?

Store Design
,

Topic summary

Goal: configure the Craft theme footer into three columns (text block, app, subscribe form) instead of the subscribe form appearing below.

Key actions and proposal:

  • After the store URL/password were shared privately, a helper provided CSS changes: make .footer-block–newsletter flex and set .footer__content-top to a CSS grid (grid-template-columns: 1fr auto; gap: 20px). Steps included editing the theme’s CSS file via Online Store > Themes > Edit code.
  • An image mockup was shared to illustrate the intended layout. The CSS code snippets are central to the solution.

Issues raised:

  • Columns appeared with unequal widths. The helper noted widths depend on content; no specific equal-width fix was given.
  • On mobile, the columns were “squashed” instead of stacking.

Latest update (resolution for mobile):

  • Revised CSS wrapped in a media query (@media only screen and (min-width: 898px)) so the multi-column layout applies only on desktop, allowing mobile to keep the default stacked layout.

Status:

  • Mobile stacking addressed by the media query. Equal-width columns remain unresolved; no definitive solution provided.
Summarized with AI on January 12. AI used: gpt-5.
1

Hello, I’d like to know how I can form my footer with the Craft theme to be in columns. Currently I have 2 columns, one with text, one with an app. I’d like my subscribe form to sit alongside these 2 elements, but currently I can only add the subscribe underneath.

Can someone advise?

Thanks

1 Like
2

Hi @spellseels

Would you mind to share your Store URL website? with password if its unpublish. And format how youd like your footer design. Thanks!

3

Hi, I don’t want to share those details on a public thread.

I’d like to have three columns in the footer. One as a text block, one as an app, and on as a subscribe form. Can you advise? Thanks

4

I understand, but its hard to design when we cant see it.

5

Is there a way I can share it privately?

6

Hi, can you help? Here is the link: www.therealmstudio.com and the password is aoclod . Let me know if you can help. Thanks

1 Like
7

Thanks for the info, Do you mean like this?

Made4uoRibe_0-1700942270119.png
Made4uoRibe_0-1700942270119.png1793×777 112 KB

If it is check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.footer-block--newsletter {
    display: flex;
    margin-top: 2rem !important;
    align-items: flex-start !important;
}

.footer__content-top {
    padding-bottom: 5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
}
  • And save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

8

That’s great, super helpful, thanks. Only problem, the columns are not equal in width. Any tips on how I can make the equal in width?

9

This is also sadly not mobile optimised - is it possible to make it so? Thanks!

10

The column are in equal width, it only depends on the content you have. You mean you like to column them also in mobile? The code are for all screen but if the specific sreen have set own design then it would not be render.

11

Hello,

I don’t want them to be columns in mobile view but they were, meaning that they were squashed together rather than stacked. Can you help?

Thanks

1 Like
12

Replace the code with this one.

@media only screen and (min-width: 898px){
.footer-block--newsletter {
    display: flex;
    margin-top: 2rem !important;
    align-items: flex-start !important;
}

.footer__content-top {
    padding-bottom: 5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
}
}

And Save.

It will have different alignment on the mobile screens.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!