Reduce Footer Logo Size for Mobile in Expanse Theme

Technical Q&A
, ,

Topic summary

Issue: Footer logo appears too large on mobile in the Expanse Shopify theme; desktop size is acceptable. The requester’s initial code changes didn’t affect mobile.

Proposed fixes:

  • Edit theme.liquid and insert CSS before the closing to target mobile sizing. The exact code was not included in the reply, but a screenshot indicates a reduced mobile logo.
  • Add a mobile-only CSS media query in base.css or theme.css:
    • @media only screen and (max-width: 600px) { … }
    • Targets #FooterMenus .footer__block … to set the logo to 100px height/width and center it (left: calc(50% - 50px)); also limits the block’s max-height. Note: the posted selector shows typos (e.g., “image-w rap”, missing dots) that may need correction to match actual classes.

Notes:

  • Media query = CSS rules that apply at specific screen widths (e.g., phones).
  • Images/screenshots are central for understanding the before/after.

Status: No confirmation from the requester; solution effectiveness remains unverified.

Summarized with AI on December 22. AI used: gpt-5.
2

Hi @courtney_43 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1723477677100.png
BSSCommerceHDL_0-1723477677100.png1902×555 38.7 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes: