Is it easy to do these changes for the footer on mobile version

Store Design

Topic summary

A user seeks help repositioning footer elements on their Shopify store’s mobile version, specifically for “Footer #3” from Shopify Section Stores. They provided a reference image showing their desired layout.

Solution Provided:

  • A developer shared custom CSS code to be added to the theme’s CSS file
  • The code uses flexbox and media queries to:
    • Reorder footer sections on mobile devices
    • Adjust widths and positioning of footer items
    • Center copyright text
    • Position the footer content absolutely

Current Status:

  • The user implemented the code but reported the footer doesn’t display as expected (shared screenshot showing the issue)
  • Another user mentioned facing similar challenges and offered to help based on their own experience
  • The discussion remains open with the layout issue unresolved
Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi,
I wonder if it is possible for someone to help me how to make these changes. See my picture. It doesn’t have to be exactly like my picture but approximately. Is it possible? I am using the Shopify Section Stores “Footer #3”.

My URL https://maggithelabel.com/ . I will share my password in private when needed.

Thanks for the help!

Before.png
Before.png1080×1350 123 KB

1 Like
2

Hi @Filippa123 , kindly share password.

3

Hi,
I sent you a message with the password!

4

Hi @Filippa123

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:768px){
.footer-second-top-sections--25106036588869__ss_footer_3_6jfXjJ.footer-third-top-sections--25106036588869__ss_footer_3_6jfXjJ {
    display: flex !important;
    flex-direction: column !important;
    margin-top: 100px;
}
.footer-second-top-item-sections--25106036588869__ss_footer_3_6jfXjJ:nth-child(1) {
    width: 100%;
    order: 4;
}
.footer-copy-text-sections--25106036588869__ss_footer_3_6jfXjJ {
  
    text-align: center !important;

}
.section-sections--25106036588869__ss_footer_3_6jfXjJ.footer-sections--25106036588869__ss_footer_3_6jfXjJ {
    position: relative !important;
}

.footer-main-right-sections--25106036588869__ss_footer_3_6jfXjJ {
    width: 90%;
    position: absolute;
    top: 25px;
}
.footer-second-top-item-sections--25106036588869__ss_footer_3_6jfXjJ:nth-child(2) {
    width: 50%;
}
.footer-second-top-item-sections--25106036588869__ss_footer_3_6jfXjJ:nth-child(3) {
    width: 50%;
}
.footer-second-top-item-sections--25106036588869__ss_footer_3_6jfXjJ:nth-child(4) {
    width: 50%;
}
}

Result:

websensepro_0-1748004616808.png
websensepro_0-1748004616808.png358×630 83.9 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

1 Like
5

Hi,
Thanks for the help. The footer looks like this after i put in the code.

Filippa123_0-1748005402733.png
Filippa123_0-1748005402733.png419×916 21.6 KB

6

It’s really a big trouble that i was also facing. But now I’ve make the footer set at sportzfy you can see. If feel ok, reply. I’ll here to sort out further.