Footer text spacing

Store Design

Topic summary

A user is experiencing excessive spacing between lines of contact information in their storeā€™s footer, describing it as appearing like double spacing.

Solutions Provided:

Three different CSS-based solutions were offered:

  1. Simplest approach: Add margin: 0; to .footer-block__details-content.rte p in the themeā€™s CSS file to remove default paragraph margins.

  2. Layout adjustment: Use media queries to set footer blocks to 25% width and center-align them, addressing overall footer structure.

  3. Refined spacing: Combine margin: 0 !important; with controlled padding (0.5rem top/bottom) in section-footer.css to match spacing with other footer elements.

Resolution:

The issue was resolvedā€”the user confirmed the solution worked. All approaches involve editing the themeā€™s CSS files through Shopify admin (Online Store > Themes > Edit code), with screenshots provided showing before/after results demonstrating reduced line spacing.

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

Hi, I am having issues with the spacing in between the sentences for my contact information inside the footer. Its far too wide and looks like double spacing. How can I reduce this so the distance is not as big? Thanks

Screenshot 2025-01-07 at 20.18.10.png
Screenshot 2025-01-07 at 20.18.10.png2880Ɨ1800 314 KB

1 Like
2

Hi @beveragebombs

TRy this one.

  1. From your Shopify admin dashboard, click on ā€œOnline Storeā€ and then ā€œThemesā€.
  2. Find the theme that you want to edit and click on ā€œActionsā€ and then ā€œEdit codeā€.
  3. 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-block__details-content.rte p {
    margin: 0;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3

Hi @beveragebombs

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (min-width: 1024px){
.footer__content-top.page-width > .footer__blocks-wrapper.grid > .footer-block.grid__item {
    width: 25% !important;
    min-width: 25% !important;
    max-width: 25% !important;
}
.footer__content-top.page-width > .footer__blocks-wrapper.grid {
    justify-content: center !important;
}
}

Result:

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

4

Hello @beveragebombs ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > section-footer.css and paste the following code at the bottom of the file:
.footer-block__details-content.rte p {
    margin: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

ZestardTech_0-1736335008324.png
ZestardTech_0-1736335008324.png1381Ɨ527 22.8 KB

The spacing between the contact options is same as left block options.

Let me know if you need further assistance!

5

Thankyou!

6

Welcome! Would you mind hitting ā€˜likeā€™ as well? Thanks!

1 Like