Reduce Spacing Between Footer Text and Social Media Icons - Dawn Theme

[wagsville]

I am trying to reduce the vertical spacing between the footer text and social media icons slightly. I am currently using Dawn theme. What code do I need to achieve this? Any help is appreciated! Store is wagsville.ca

[Keshan97 · Accepted solution]

Could you try this: 

.footer-block--newsletter {
margin-top:20px !important;
}

Or

1. Head over to your Shopify admin panel and navigate to Online Store > Themes.
2. Locate your active Dawn theme and click on the Actions dropdown menu, then select Edit code.
3. In the code editor, find and click on the section-footer.css file within the Assets directory. This is where you'll find the styling rules for your footer.
4. Scroll or use the search function (Ctrl+F on Windows or Cmd+F on Mac) to locate the line of code around line 123. You're looking for something that looks like this: margin-top: 3rem;. This line controls the top margin of a specific element in the footer, contributing to the space above the social media icons or a similar section.
5. Change 3rem to 2rem or any specific pixel value you prefer, like 20px. This will reduce the space accordingly. 

[Keshan97]

Hey there! It's great to hear you're tweaking the Dawn theme to fit your store's style better. To reduce the vertical spacing between the footer text and the social media icons, you're right on track with wanting to add some custom CSS. Here's a simple guide on how to do just that:

1. From your Shopify admin dashboard, go to Online Store > Themes.
2. Find the Dawn theme you're using and click Customize.
3. In the theme editor, navigate to Theme settings which you'll find at the bottom of the sidebar on the left.
4. Look for the Custom CSS section. If Dawn doesn't have this option directly, don't worry! You can achieve the same result by going to Edit code in the theme's actions menu.
5. If you're in the code editor, open the base.css file or any CSS file that gets loaded site-wide. You can usually find this under the Assets folder.
6. Scroll to the bottom of the file, and paste the following CSS code:

footer-block--newsletter.scroll-trigger.animate--slide-in {
    margin-top: 20px;
}
​

• This code adjusts the top margin to 20px, reducing the space above your social media icons relative to the newsletter block in the footer. Feel free to tweak the 20px value to get the exact spacing you desire.After adding the code, save your changes and preview your site to see the adjustment.

• Should you need further customization or run into any issues, feel free to reach out. Happy customizing, and I hope your site looks exactly as you envision!

[wagsville]

Hello, thank you for your reply! I applied the code you provided although the distance between the social media icons and the text within a section in the footer remain unchanged. They are in the same section within the footer, not separate blocks/sections within the footer.

[Keshan97 · Accepted solution]

Could you try this: 

.footer-block--newsletter {
margin-top:20px !important;
}

Or

1. Head over to your Shopify admin panel and navigate to Online Store > Themes.
2. Locate your active Dawn theme and click on the Actions dropdown menu, then select Edit code.
3. In the code editor, find and click on the section-footer.css file within the Assets directory. This is where you'll find the styling rules for your footer.
4. Scroll or use the search function (Ctrl+F on Windows or Cmd+F on Mac) to locate the line of code around line 123. You're looking for something that looks like this: margin-top: 3rem;. This line controls the top margin of a specific element in the footer, contributing to the space above the social media icons or a similar section.
5. Change 3rem to 2rem or any specific pixel value you prefer, like 20px. This will reduce the space accordingly. 

[wagsville]

That worked thank you!

[wagsville]

Is it possible to apply this spacing for mobile view as well? It works perfectly for desktop!

[Keshan97 · Accepted solution]

Yes that's doable, find line 316 in same CSS file , and find 

footer-block__details-content {
margin-bottom: 4rem;
}

Change the value as you want