How to increase spacing between blocks in footer - Dawn theme

Store Design
,

Topic summary

A Shopify store owner using the Dawn theme wants to increase spacing between three footer blocks that are currently too close together.

Solutions Provided:

Multiple community members offered CSS-based solutions:

  • Primary approach: Add custom CSS targeting .footer-blocks-wrapper.grid classes
  • Implementation steps: Navigate to Online Store → Themes → Edit code → locate base.css/style.css/theme.css file → add CSS at bottom
  • Recommended CSS code: .footer-blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in { gap: 6rem !important; } (some suggest 10rem)

Current Status:

The original poster encountered difficulty locating the </body> tag in the theme.liquid file when following one solution. Another responder provided a screenshot to help locate the correct file location. The issue remains unresolved as the conversation continues with troubleshooting guidance.

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

Hi,

I currently have 3 blocks in my footer, they are very close to each other and I would like to increase the spacing between them.

I use Dawn theme, my site is https://pokepopspot.com/

Screenshot 2023-09-27 at 18.13.07.png
Screenshot 2023-09-27 at 18.13.07.png1327Ă—469 47.1 KB

1 Like
2

Please, advise. Thanks!

3

Hi @pokepopspot ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Beae_Anthony_0-1695831862234.png
Beae_Anthony_0-1695831862234.png1187Ă—443 40.7 KB

Best regards,

Anthony

4

Hi @pokepopspot

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    gap: 6rem !important;
}
2 Likes
5

Hey @Beae_Cass thanks for the advice, I can’t find in the theme.liquid file though

6

You can follow this picture

Beae_Anthony_0-1692221515245.png
Beae_Anthony_0-1692221515245.png1830Ă—745 86.5 KB

7

Hi @pokepopspot

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

.footer__blocks-wrapper.grid.grid–1-col.grid–2-col.grid–4-col-tablet.scroll-trigger.animate–slide-in {gap: 10rem !important;}

Regards,

San