Desktop Only Padding

Store Design
, , ,

Topic summary

Issue: After implementing an accordion footer for mobile, the desktop/standard layout showed footer menu headings too close to the top. The requester wanted top padding applied only on non-mobile (where the accordion isn’t used).

Solutions provided:

  • Theme code edit: Add CSS in theme.liquid (before ) to increase top padding on desktop only. Confirmed to fix the issue.
  • No-code/Admin approach: Add Custom CSS in the Footer section using a media query so it only applies when the screen is wider than 750px (when the accordion disappears), e.g., target .footer__blocks-wrapper with padding-top. This also achieved the desired spacing and is advantageous if theme updates revert code edits.

Notes:

  • The core tactic is a desktop-only media query (min-width: 750px) applying padding-top to the footer container.

Outcome: Resolved. Both methods work; the Custom CSS route is highlighted as update-safe and easy to manage.

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

IMG_6505.png
IMG_6505.png1170×2532 271 KB

IMG_6506.png
IMG_6506.png2532×1170 88 KB

Hello, I’ve added a code for an accordion footer and the padding I’ve placed around my menu titles is fine. However when in the standard layout the menu headings are too close to the top.

How do I add padding to the top of the footer on the non-mobile version only?(or rather any version that won’t adopt the accordion)

2

Hi @PoW8 !

Could you share your store password?

1 Like
3

pw:teunti

4

@PoW8 ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Result:

BSSCommerceB2B_0-1728794980090.png
BSSCommerceB2B_0-1728794980090.png971×902 43.4 KB

If it helps you, please like and mark it as the solution.

Best Regards :blush:

1 Like
5

Thanks, this does exactly what I needed.

1 Like
6

Awesome! You can solve this by adding Custom CSS to the Footer in Admin.

This method adds padding to the top of footer__blocks-wrapper when the screen is wider than 750px (when your accordion disappears).

Once in Admin, click Footer and go to the side bar.

2024-10-13T11_59_26,353872309+07_00.png
2024-10-13T11_59_26,353872309+07_00.png346×109 2.82 KB

Add this Custom CSS:

2024-10-13T11_58_56,566207928+07_00.png
2024-10-13T11_58_56,566207928+07_00.png302×238 12.8 KB

For copy and paste:

@media (min-width: 750px) {
  .footer__blocks-wrapper {
    padding-top: 1.5rem;
  }
}

This will achieve this:

2024-10-13T11_56_22,989510354+07_00.png
2024-10-13T11_56_22,989510354+07_00.png1925×651 39.2 KB

Hope this helps!

1 Like
7

Also valid. Especially in case Shopify updates start removing all code but custom CSS again.

1 Like