Desktop Only Padding

[PoW8]

 

 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)

[BSSCommerce-B2B · Accepted solution]

@PoW8,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media screen and (min-width: 750px) {
footer .footer__content-top {
   padding-top: 5rem!important;
}
}
</style>

Result:

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

Best Regards 😊

[TikitaTech]

Hi @PoW8!

Could you share your store password?

[PoW8]

printsofwhatever.com

pw:teunti

[TikitaTech · Accepted solution]

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.

Add this Custom CSS:

For copy and paste:

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

This will achieve this:

 Hope this helps!

[PoW8]

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

[BSSCommerce-B2B · Accepted solution]

@PoW8,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media screen and (min-width: 750px) {
footer .footer__content-top {
   padding-top: 5rem!important;
}
}
</style>

Result:

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

Best Regards 😊

[PoW8]

Thanks, this does exactly what I needed.