How to add spacing to rich text buttons, Dawn Theme

Store Design
,

Topic summary

A user is trying to align rich text buttons directly beneath column buttons in the Dawn theme. They’ve provided their site URL and a screenshot showing the current layout.

Proposed Solution:
Another user suggests adding CSS to control button spacing:

  • Use flexbox (display: flex) with justify-content: center on the .rich-text__buttons class
  • Add a gap property for spacing between buttons
  • Include a media query for responsive behavior at max-width 768px
  • Adjust gap values (20px default, 50px on smaller screens)

Status: The CSS solution has been provided but not yet confirmed as implemented or tested by the original poster.

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

Hi! So, I added 2 rich text buttons beneath 2 columns. I want to space the buttons so they are directly beneath the columns buttons. Can someone help me? I’ll leave my site’s URL a a picture of what I’m referring to.

URL: https://e5d72d-3.myshopify.com/

lucasdcaceres_0-1708793645724.png
lucasdcaceres_0-1708793645724.png1801×877 228 KB

2

@lucasdcaceres

You can add the below CSS in your CSS file.

.rich-text__buttons.rich-text__buttons--multiple.scroll-trigger.animate--slide-in {
    display: flex;
    justify-content: center;
    max-width: unset;
    gap: 50px;
}
@media screen and (max-width: 767px) {
  .rich-text__buttons.rich-text__buttons--multiple.scroll-trigger.animate--slide-in {
    gap: 20px;
  }
}