footer

Store Design
,

Topic summary

Goal: Adjust the footer layout so the navigation aligns horizontally with the newsletter, place social media icons beneath the newsletter, and make the footer menu smaller on mobile. A site link and an example image were provided.

Proposed approaches:

  • Theme file edit: One participant recommends modifying footer.liquid (Shopify theme file) and requests collaboration access or the footer code to implement the layout changes.
  • CSS-only fix: Another participant provides Custom CSS to add via Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS. It uses media queries to: (a) set the footer’s top content container to flex and center-align items on desktop; (b) set the footer menu item font size to 20px on screens ≤768px.

References: Screenshots were shared to illustrate the current issue and the CSS results.

Status: A concrete CSS solution was suggested with implementation steps, and a code-level option is available if access is granted. No confirmation from the requester yet; resolution remains open.

Summarized with AI on December 12. AI used: gpt-5.
1

WhatsApp Image 2024-12-10 at 11.11.06_810d3868.jpg
WhatsApp Image 2024-12-10 at 11.11.06_810d3868.jpg1080×247 21 KB

I want the footer navigation menu to horizontally align with the newsletter and the social media icon to be under the newsletter then the footer nav.menu to be more smaller in the mobile version

https://sunfadednyc.com/

2

Hi @maria323

it can be done but needs a little adjustment on the footer.liquid file for that I have to look into the footer file kindly provide me the collaboration code so I can check or you can share the complete code of footer file I can check and guide you how to do that

3

Hi @maria323

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (min-width: 769px){
.footer__content-top.page-width {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
} 
@media screen and (max-width: 768px){
.footer-block.grid__item.footer-block--menu * {
    font-size: 20px !important;
}
}

Here is the result: https://prnt.sc/DAENk7MB-0nB ; https://prnt.sc/QC28CLE7NgRH

I hope this helps

Best,

Daisy