How can I reduce footer spacing on mobile for a neater look?

Store Design
, ,

Topic summary

A user seeks to reduce spacing in the mobile footer between FAQ and social media icons for a cleaner appearance.

Solutions Provided:

Two contributors offered CSS code snippets targeting mobile devices (max-width: 767px):

  • PageFly-Victor suggested adding code to base.css to remove bottom margins from footer grid and list elements
  • infoatcodelab7 recommended inserting similar CSS into section-footer.css, adjusting margins for footer wrapper and blocks

Both solutions involve:

  1. Navigating to Online Store → Themes → Edit Code
  2. Locating the appropriate CSS file
  3. Pasting provided code at the bottom

Follow-up Question:

The original poster asked PageFly-Victor about center-aligning the menu and currency selector instead of left alignment. A partial CSS solution for center-aligning the footer country label was provided.

Status: The spacing issue appears addressed with working code, though the alignment customization remains partially answered.

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

Hi just wondering is it possible to fix the spacing for “MOBILE only” footer to have less space in between the FAQ and social media icons so that footer will look neater.

KelvinLeow_0-1677730888935.png
KelvinLeow_0-1677730888935.png545×618 10.3 KB

Web: https://dissy-co.myshopify.com/
Password: Cheolt

2

Hi [email removed]KelvinLeow,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media(max-width:767px){
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet,
ul.footer-block__details-content.list-unstyled{margin-bottom:0 !important}
}

PageFlyVictor_0-1677732184417.png
PageFlyVictor_0-1677732184417.png554×1102 28.2 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

3

@KelvinLeow

To fix mobile footer follow below steps :

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > section-footer.css and paste this at the bottom of the file:
@media only screen and (max-width:767px){
  .footer__blocks-wrapper.grid{
    margin-bottom: 0px;
  }
  .footer__blocks-wrapper .footer-block .list-unstyled{
    margin-bottom: 10px;
  }
}

Hope this works well for your site.

Best Regards !

4

Hi @PageFly-Victor , I have another question. For the menu and currency is it possible to make it center alignment instead of left alignment?

KelvinLeow_0-1678085748269.png
KelvinLeow_0-1678085748269.png373×461 10.1 KB

5

You can be using my code

@media (max-width: 767px){
#FooterCountryLabel {
    text-align: center !important;
}}