Can the footer text be side by side on Mobile device

Store Design
, ,

Topic summary

A user seeks to display footer text elements side-by-side on mobile devices for their Shopify store.

Two solutions provided:

  1. JavaScript approach (Moeed): Add custom code to the theme.liquid file, placed above the </body> tag. This solution includes a screenshot showing the expected result.

  2. CSS approach (GTLOfficial): Modify base.css by adding CSS rules that:

    • Set footer grid items to display: flex with flex-flow: row
    • Apply width: 50% and margin-top: 0px with !important flags
    • Add 1rem gap between elements
    • Also includes a visual result screenshot

Status: The discussion remains open with no indication which solution the original poster selected or whether either resolved the issue. Both responses request feedback through likes/solution marking.

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

033440e52847a704a5934eac07366f1.png
033440e52847a704a5934eac07366f1.png308×499 40.4 KB

2

https://bmcarcover.com/

3

Hey @Jim_65

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 tag

RESULT:

Moeed_0-1723273800469.png
Moeed_0-1723273800469.png378×680 28.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

Hello @Jim_65

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
add this code at the end of the file.

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
display: flex;
flex-flow: row;
gap: 1rem;
}

.footer-block.grid__item.scroll-trigger.animate--slide-in {
width: 50% !important;
margin-top: 0px !important;
}

result

12.png
12.png508×457 4.66 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like