Refresh theme - remove space between banner and button

Shopify Discussion

Topic summary

Issue: Reduce excessive vertical space around the Image Banner button on mobile so the button sits closer with reasonable spacing. The referenced image wasn’t visible to the helper.

Guidance provided:

  • Adjust CSS margin to control space around the button (margins add space outside an element).
  • Use layout properties like display: flex or display: grid to manage spacing/alignment; consider justify-content for vertical distribution.
  • Target only mobile via CSS media queries (media queries apply styles based on viewport size).

Example approach (high level):

  • Set the banner/button wrapper to flex in a column to control vertical spacing (e.g., display: flex; flex-direction: column; justify-content: space-around;).
  • Use a media query so changes affect mobile widths only (example referenced 768px breakpoint).

Notes:

  • The attached image would help diagnose exact spacing but wasn’t accessible to the helper.
  • No theme-specific code changes were confirmed; advice remains general CSS guidance.

Status: No confirmed resolution. Further details (screenshot/code or theme section selectors) are needed to provide a precise, theme-specific fix.

Summarized with AI on January 22. AI used: gpt-5.
2

Hi Zoose!

Unfortunately, I can’t see the attached photo.

But when we talked about the top/bottom space, between some elements, we can use different types of techniques to achieve this.

  1. Margin
    This property can be used to set a margin on all four sides of an element. Margins create extra space around an element.

  2. Use the display property. Namely, display: flex; or display: grid;
    They have additional options that allow you to create the right space between elements.

Read more about this in the documentation below:

Also, you mention that it should work only in mobile view. To achieve this, you can add media queries, for example:

@media (min-width: 768px) {
  display: none;
}

This CSS will only apply styles if the width of your browser’s viewport is equal to or greater than 768px.

If we’re talking about your situation, it’s the styles that can work for you.

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

@media (min-width: 768px) {
  display: none;
}

P.S. It will only work on devices with a width of less than 768 pixels.

I hope that my answer helps you to resolve the issue. If you need a more detailed explanation or further help - just contact me.