Mobile Footer two column & Remove Spacing

Shopify Discussion

Topic summary

A user sought help making their Shopify mobile footer display in a 2x2 column layout instead of a single long column, and wanted to reduce spacing between the footer and the “follow us online” section.

Initial Solution Attempt:

  • A responder provided custom CSS code to be added to the theme’s base.css file
  • The code used CSS Grid with grid-template-columns: 1fr 1fr to create two columns on mobile screens
  • This initial approach didn’t work for the user

Troubleshooting:

  • The responder identified a syntax error in the user’s base.css file (missing semicolon)
  • After fixing the syntax error, the CSS still didn’t apply properly
  • The issue appeared to be caused by conflicting code elsewhere in the theme

Final Resolution:

  • Instead of adding CSS to base.css, the code was placed in theme.liquid before the closing </body> tag using <style> tags
  • This approach successfully implemented the two-column mobile footer layout

Status: Resolved. The user confirmed the solution worked.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

My mobile footer is too long and I want it to be two columns side by side (like a 2x2 matrix). How to achieve this ? Also, I want to remove excess space between it and the follow us online option. Thank you.

https://kashco-interiors.myshopify.com/

password: kashco

1 Like
2

Hi @kashco

Like this?

Made4uoRibe_0-1740583600657.png
Made4uoRibe_0-1740583600657.png567Ă—653 28.4 KB

Ifi t is try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
@media screen and (max-width: 749px) {
    .footer-block.grid__item {
        margin: 0;
    }
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {
    margin-bottom: 0;
}

.footer__content-top.page-width {
    padding-top: 2rem;
}

ul.footer__list-social.list-unstyled.list-social::before {
  transform: translate(-30%, 50%);
}
}
  • And Save.

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

1 Like
3

I tried but it doesn’t seem to work on my end.

4

https://community.shopify.com/post/1882306 I tried this too it didn’t work.

5

There is something wrong in your base.css. this is now.

Made4uoRibe_0-1740585526314.png
Made4uoRibe_0-1740585526314.png536Ă—281 4.83 KB

Add semi-colon here.

Made4uoRibe_1-1740585555782.png
Made4uoRibe_1-1740585555782.png481Ă—157 3.9 KB

And Save.

You need to fix this before pasting the code. So you wont have problem if you add more code in the base.css.

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

6

Thank you for pointing the error. I did follow what you said but no luck

7

It look like you add more code that calling this section. TRy to add in the theme.liquid code.

  • 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 “theme. Liquid” file. Find the tag and paste the code below before the tag.

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

1 Like
8

Thanks. It worked. Appreciated