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

Store Design
, ,
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;
}}