How To Fix Footer?

Store Design

Topic summary

A store owner reports their footer is malfunctioning and shares a screenshot for reference.

Proposed Solutions:

  • One user provides CSS code modifications targeting the theme.css file around lines 15003-15004, focusing on mobile responsive styling (max-width: 767px) for footer items
  • However, this response contains garbled/reversed text that appears corrupted

Clarification Needed:

  • Another participant asks what specifically is wrong with the footer
  • The original poster clarifies the Instagram icon positioning is incorrect and should be moved down

Alternative Fix:

A detailed step-by-step solution is offered:

  1. Navigate to Online Store → Themes → Edit Code
  2. Open Assets/theme.css file
  3. Add specific CSS code to the end of the file targeting .footer__item-list with flexbox display properties for mobile screens

The discussion includes screenshots showing the code editor interface and specific CSS modifications needed. The issue appears to be a mobile responsive layout problem with footer elements.

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

My footer is not working properly so I don’t know what to do any suggestions?

https://sneakerskull.com/

Screenshot_2024-05-25-20-13-58-95_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
Screenshot_2024-05-25-20-13-58-95_40deb401b9ffe8e1df2f1cc5ba480b12.jpg1080×2400 101 KB

2

Hi @Emiway ,
This can be solved, follow the steps
Go to Online Store > themes > edit Code
Search theme.css file
In that file around line 15003, 15004 there will be this code

media only screen and (max-width: 767px){
.footer__item.footer__item--text.is-first {
    max-width: 100% !important;
}
.footer__item-list {
    grid-template-columns: 1fr !important;
}
}

replace this with

media only screen and (max-width: 767px){
.footer__item.footer__item--text.is-first {
    max-width: 100% !important;
}
{% comment %}
.footer__item-list {
    grid-template-columns: 1fr !important;
}
{% endcomment %}
}

and you will be good to go
BR

Dawood Mirza

3

Hi @Emiway ,

Which wrong here?

EBOOST_0-1716794857747.png
EBOOST_0-1716794857747.png409×899 50.3 KB

4

Not Working

5

That Instagram Icon Should Be Down

6

Hi,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/theme.css
  2. Add code below to end of file
@media only screen and (max-width: 767px) {
  body .footer__item-list {
    display: flex;
    flex-flow: column;
  }
}

EBOOST_0-1717160626164.png
EBOOST_0-1717160626164.png410×911 44.2 KB