Add Spacing between 2 buttons

Store Design

Topic summary

A user is attempting to add spacing between two buttons in a Shopify parallax banner section. They’ve shared a screenshot showing the current button layout and included the CSS code from their section’s liquid file.

Proposed Solution:
A community member provided CSS code to address the spacing issue:

  • Add custom CSS to the theme’s main stylesheet (main.css, base.css, style.css, or theme.css)
  • The code targets .banner__buttons.banner__buttons--multiple with flexbox properties
  • Uses justify-content: center, flex-wrap: nowrap, and gap: 50% for spacing
  • Applied via media query for screens with minimum width of 749px

Current Status:
The discussion appears to have a potential solution, but the user hasn’t confirmed whether it resolved their issue. Multiple respondents requested the store URL for more specific troubleshooting if the CSS solution doesn’t work.

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

I am using a parallax banner and am trying to add more space between the two buttons. I have shown in image below and added the CSS from the section liquid regarding buttons. Help is much appreciated.

Screenshot 2024-07-19 at 10.59.34 AM.png
Screenshot 2024-07-19 at 10.59.34 AM.png2154Ă—472 149 KB

{{ block.settings.button_font | font_face: font_display: 'swap' }} .banner-button-{{ block.id }} { margin-top: {{ block.settings.button_mt | times: 0.75 | round: 0 }}px !important; font-size: {{ block.settings.button_size_mobile }}px; font-weight: 700; color: {{ block.settings.button_color }}; line-height: {{ block.settings.button_height }}%; text-transform: unset; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; max-width: fit-content; text-align: center; text-transform: unset; text-decoration: none; padding: {{ block.settings.button_padding_vertical | times: 0.75 | round: 0 }}px {{ block.settings.button_padding_horizontal | times: 0.75 | round: 0 }}px; border-radius: {{ block.settings.button_radius }}px; gap: {{ block.settings.button_gap | times: 0.75 | round: 0 }}px; transition: all 0.25s ease 0s; position: relative; z-index: 2; } .banner-button-{{ block.id }}:hover { color: {{ block.settings.button_hover_color }}; transition: all 0.25s ease 0s; } .banner-button-icon-{{ block.id }} { display: block; width: 16px; height: 16px; } .banner-button-icon-{{ block.id }} svg { display: block; width: 100%; height: 100%; object-fit: cover; } .banner-button-{{ block.id }} svg path { stroke: {{ block.settings.button_color }}; transition: all 0.25s ease 0s; } .banner-button-{{ block.id }}:hover svg path { stroke: {{ block.settings.button_hover_color }}; transition: all 0.25s ease 0s; } @media(min-width: 1024px) { .banner-button-{{ block.id }} { margin-top: {{ block.settings.button_mt }}px !important; gap: {{ block.settings.button_gap }}px; padding: {{ block.settings.button_padding_vertical }}px {{ block.settings.button_padding_horizontal }}px; font-size: {{ block.settings.button_size }}px; } }

{% if block.settings.button_custom %}

.banner-button-{{ block.id }} { font-family: {{ block.settings.button_font.family }}, {{ block.settings.button_font.fallback_families }}; font-weight: {{ block.settings.button_font.weight }}; font-style: {{ block.settings.button_font.style }}; }

{% endif %}

{% if block.settings.button_ellipse %}

.banner-button-{{ block.id }} { border-radius: 100% / 100%; }

{% endif %}

{% if block.settings.button_shadow %}

.banner-button-{{ block.id }} { box-shadow: 0 8px 16px 2px {{ block.settings.button_shadow_color | hex_to_rgba: 0.33 }}; }

{% endif %}

{% if block.settings.button_style == “non_outline” or block.settings.button_style == “non_outline_arrow” %}

.banner-button-{{ block.id }} { background-color: {{ block.settings.button_bg_color }}; } .banner-button-{{ block.id }}:hover { background-color: {{ block.settings.button_bg_hover_color }}; }

{% elsif block.settings.button_style == “outline” or block.settings.button_style == “outline_arrow” %}

.banner-button-{{ block.id }} { background-color: {{ block.settings.button_bg_color }}; border: {{ block.settings.button_border_thickness }}px solid {{ block.settings.button_border_color }}; } .banner-button-{{ block.id }}:hover { background-color: {{ block.settings.button_bg_hover_color }}; border: {{ block.settings.button_border_thickness }}px solid {{ block.settings.button_border_hover_color }}; }

{% endif %}

{% endif %}

{% endfor %}

1 Like
2

Hey @avk9641

Share your Store URL and Password if enabled.

Best Regards,

Moeed

3

Hi @avk9641

Would you mind to share your store URL? Thanks!

4

Hi @avk9641

Check this one if it work, if not would you mind to share your store URL? Thanks!

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media only screen and (min-width: 749px){
.banner__buttons.banner__buttons--multiple {
    justify-content: center;
    gap: 50%;
    flex-wrap: nowrap;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like