How can I eliminate spaces between my content blocks?

Store Design
, , ,

Topic summary

Main issue: remove unwanted gaps between content blocks on a Shopify email sign-up page.

  • Early attempts: Replacing images to remove white space didn’t fix spacing; alignment worsened and bottom padding remained.
  • Implemented fix (mobile): Custom CSS added in theme.liquid via media queries. A negative top margin on the newsletter section (OP set to -100) closed the gap. Additional CSS adjusted bottom padding on the targeted section, producing the desired mobile look.
  • Desktop attempts: Suggested CSS labeled for “desktop” used a max-width: 990px media query (still mobile/tablet), so no visible change. Further CSS (including grid width changes and hiding a text item) also didn’t achieve the desired desktop layout.

Current status:

  • Mobile spacing on the email sign-up page is largely resolved.
  • Desktop layout still not matching the desired design.
  • OP now seeks help applying similar fixes to the homepage (mobile) and the post–email-gate page (mobile).

Notes:

  • Access link and password were shared for review.
  • Multiple screenshots depicting current vs desired spacing are central to understanding the issue.
Summarized with AI on January 3. AI used: gpt-5.
17

@Jferguson1
Desktop View:

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media only screen and (max-width:990px){ .newsletter__wrapper>*+* { margin-top: -7rem !important; } .section-template--21073429922132__newsletter_UYq3RX-padding { padding-bottom: 51% !important; } }

techlyser_web_0-1708702067453.png
techlyser_web_0-1708702067453.png779×356 4.36 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.