Can the “policy” and “info” text in the footer be arranged side by side?

Store Design

Topic summary

A user seeks to arrange footer sections (“policy” and “info” text) side by side on mobile view for their Shopify store (bmcarcover.com). The original footer displays these elements stacked vertically.

Initial Attempts:

  • Multiple CSS solutions were proposed targeting section-footer.css and theme.liquid, using media queries for mobile screens
  • Early code snippets failed to produce the desired layout, with issues including no visible changes and text wrapping into multiple rows

Complicating Factors:

  • The user modified their footer structure mid-discussion (changing to single text and menu), requiring adjusted solutions
  • Accumulated code from multiple attempts created conflicts

Resolution:
Bang_T provided a working CSS solution to be added via Theme Customizer > Custom CSS:

@media (max-width: 767px){
  .footer-block.grid__item.scroll-trigger.animate--slide-in:not(:first-child) {
    flex: 0 0 calc(50% - 15px);
  }
}

This successfully arranged the footer blocks side by side on mobile devices. The issue is now resolved.

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

Can the “policy” and “info” text in the footer be arranged side by side?

da198333-6d8b-4e8c-ad3a-5aac572e91c2
da198333-6d8b-4e8c-ad3a-5aac572e91c2278×479 17.2 KB

like this

2

Hello @Jim_65 ,

Edit section-footer.css you can find this file under assets.

Scroll down to bottom and add this css

@media screen and (max-width: 767px) {
    .footer-block.grid__item {
        width: 46% !important; 
    }
}

Regards
Guleria

3

image
image896×671 44.4 KB

like this？But it hasn’t changed.

4

Please update the css code

@media screen and (max-width: 767px) {
    .footer .footer-block.grid__item {
        width: 46% !important; 
    }
}
5

It still hasn’t changed.:face_holding_back_tears:

1 Like
6

Please go to your store admin > Sales channels > Online Store > Themes > click “…“ in current theme > Edit code, open theme.liquid file, below add this code

<style>
@media (max-width: 749px) {
html .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    display: grid !important;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 16px ! IMPORTANT;
    grid-row-gap: 3rem !important;
}
.footer__blocks-wrapper .footer-block:first-child {
    grid-area: 1 / 1 / 2 / 3;
}
.footer__blocks-wrapper .footer-block:nth-child(2) {
    grid-area: 2 / 1 / 3 / 2; 
}
.footer__blocks-wrapper .footer-block:nth-child(3) {
    grid-area: 2 / 2 / 3 / 2; 
}
.footer__blocks-wrapper .footer-block:last-child { 
    grid-area: 3 / 1 / 4 / 3; 
}
}
</style>

Screenshot 2025-08-11 at 09.50.08
Screenshot 2025-08-11 at 09.50.08854×1580 60.5 KB

7

Why is the text in two rows?:sob:

8

Please update the code

<style>
@media (max-width: 749px) {
html .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in .footer-block.grid__item { width: 100% !important; }
html .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    display: grid !important;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 16px ! IMPORTANT;
    grid-row-gap: 3rem !important;
}
.footer__blocks-wrapper .footer-block:first-child {
    grid-area: 1 / 1 / 2 / 3;
}
.footer__blocks-wrapper .footer-block:nth-child(2) {
    grid-area: 2 / 1 / 3 / 2; 
}
.footer__blocks-wrapper .footer-block:nth-child(3) {
    grid-area: 2 / 2 / 3 / 2; 
}
.footer__blocks-wrapper .footer-block:last-child { 
    grid-area: 3 / 1 / 4 / 3; 
}
}
</style>
9

I’ve changed it to a single text and menu. Could you please provide me with a new code? Thank you very much.

10

Hi @Jim_65,

Did you solve it?

11

not yet😢Can you help me?

12

Hi @Jim_65,

There is too much code added now and it will be difficult for me to guide you.

Can you remove all previous tutorial code? I will help you check and add the correct code again

13

it‘s ok. ’no problem

14

Hello @Jim_65

Go to theme Customizer > Theme settings > Custom CSS and paste this code

@media (max-width: 767px){
.footer-block.grid__item.scroll-trigger.animate--slide-in:not(:first-child) {
flex: 0 0 calc(50% - 15px);
}
}

image
image641×900 32.7 KB

1 Like
15

it’s ok. thank you​:blush::blush:

1 Like
16

np @Jim_65
Happy to help :blush: