Fix footer on mobile view

Store Design
,

Topic summary

A user reports footer menu formatting issues on mobile view where titles are overlapping. The site in question is sixinch.com.au.

Proposed Solutions:

Multiple respondents offered CSS-based fixes:

  • Column layout approach: Add CSS to base.css targeting footer blocks with max-width: 47% on screens under 749px, creating a two-column mobile layout

  • Centered vertical layout: Alternative CSS solution that converts footer menu to a vertical, center-aligned format by modifying flex-direction and text alignment properties

Both solutions require:

  1. Accessing theme code via Online Store → Themes → Edit code
  2. Locating the base.css file
  3. Adding custom CSS with media queries for mobile breakpoints

One respondent included a screenshot showing the expected mobile footer appearance. The discussion remains open pending confirmation from the original poster on which solution resolves the overlapping issue.

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

How do I fix my footer menu so that it’s in columns on mobile view? Currently it’s formatted strangely where the titles are overlapping on mobile view only.

website: sixinch.com.au

thanks

1 Like
2

Mustafa_Ali_0-1744807242216.png
Mustafa_Ali_0-1744807242216.png280×460 11.5 KB

i think you want this one

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
before the body ----->
if this code work please do not forget to like and mark it solution

3

Hi, Majaa I just got a solution to your question. What theme is your store built on?

4

To fix your footer menu on Shopify so it displays in columns on mobile view, you’ll need to add some custom CSS code. Here’s a step-by-step solution:

Step 1: Access your Shopify theme files

Go to Online Store → Theme → Edit code.

Step 2: Find the relevant CSS file

Search for the base.css file or a similar CSS file in your theme.

Step 3: Add the custom CSS code

Paste the following code at the bottom of the file:

@media (max-width: 749px) {
.footer-block.grid__item.footer-block–menu {
max-width: 47% !important;
}
}

This code will make your footer menu display in two columns on mobile view. Adjust the max-width value as needed to fit your theme.

Please let me know if this solves the problem

5

Hello @majaa ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width:750px){
ul.footer-block__details-content.list-unstyled {
    flex-direction: column !important;
    margin-top: 0 !important;
}
a.link.link--text.list-menu__item.list-menu__item--link {
    text-align: center !important;
    display: block;
}
}

ZestardTech_1-1744809924549.png
ZestardTech_1-1744809924549.png459×746 18 KB

Let me know if you need further assistance!