Add Spacing between 2 buttons

Store Design
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 %}

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!