Adjust footer height on Symmetry

[SPH1]

I am struggling to reduce the height of the footer at the bottom of my website. Where I have added the arrows I would like to reduce those sections if possible so that when you scroll to the bottom of the page you see the entire footer as suppose to what you can see in the screenshot provided.

[Dotsquares]

Hi @SPH1 ,

Please find the solution below:

Solution: Add Custom CSS to Minimize Footer Height

Step 1: Open the Theme Editor
- In Shopify admin, go to Online Store > Themes.
- Click “Actions” next to your current theme and select “Edit code”.

Step 2: Locate the Footer CSS
Find your theme’s CSS file:
It might be in assets/ folder, typically named something like base.css, theme.css, or style.css.

Step 3: Add Custom CSS
Add the following CSS at the bottom of your main CSS file:

/* Reduce footer padding and margin */
footer {
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}

/* Adjust newsletter or column spacing */
.footer .newsletter,
.footer .footer__blocks,
.footer .footer__content {
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 0px !important;
}

/* Reduce spacing below payment icons */
.footer .footer__bottom {
padding-top: 10px !important;
padding-bottom: 10px !important;
}

** Adjust 20px and 10px values as needed — reduce further if required.

Step 4: Save and Preview
- Save your changes and reload the homepage.
- Scroll to the footer to see the new reduced height in effect.

Hope these steps will solve your website issues. Let me know if you have any other questions.

Regards,

[YogeshNimkar]

Hello,
Could you please share website url?

[Small_Task_Help]

Hi,

Hope this will help

- Open Footer File and Open CSS File
- Add Custom CSS to Reduce Footer Height
CSS example

/* Reduce footer padding and spacing */
.footer {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  margin-top: 0 !important;
}

.footer__content {
  padding: 0 !important;
  margin: 0 !important;
}

.footer__blocks {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

[SPH1]

Hi,

I have since managed to reduce the bottom footer (where its black) which I am happy with. I did this with the help of the Shopify Sidekick Ai.

However I am really struggling to reduce the height of the upper footer (where its teal) so that where I have placed the arrow that space no longer exists.

This is the current Custom CSS code I am using:

@font-face {
font-family: "Nulshock";
src: url("https://cdn.shopify.com/s/files/1/0932/8037/1023/files/Nulshock_Bd.woff2?v=1751377388")
format("woff2");
font-weight: bold;
font-display: swap;
}
.announcement-bar,
.header__menu,
.navigation,
.main-menu,
nav a,
.site-nav a,
.header nav,
.menu-drawer nav {
font-family: "Nulshock", sans-serif !important;
}
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.section-footer h1,
.section-footer h2,
.section-footer h3,
.section-footer h4,
.section-footer h5,
.section-footer h6,
footer [class*="heading"],
footer [class*="title"],
footer [class*="label"],
.footer [class*="heading"],
.footer [class*="title"],
.footer [class*="label"],
.section-footer [class*="heading"],
.section-footer [class*="title"],
.section-footer [class*="label"] {
font-family: "Nulshock", sans-serif !important;
color: white !important;
}
.section-footer__row-upper {
background-color: #33a5a5;
padding: 15px 0 !important;
}
.section-footer__row-lower {
background-color: #070707;
padding: 8px 0 !important;
}

Website URL is https://zxucb1-ms.myshopify.com/ 

Aside to this I have also notice when accessing the website on a mobile device the bottom footer (where its black) does not go to the full width of the page. I am unsure if this is linked in any way to the code already inputted.

Any help would be hugely appreciated.