Buttons on Rich text

Shopify Discussion

Topic summary

A user is experiencing spacing issues with two buttons in Shopify’s Dawn theme rich text section. The buttons appear without any gap between them on both desktop and mobile, despite attempts to modify the section-rich-text.css file.

Proposed Solution:

  • Another user provided CSS/HTML template code using flexbox with a gap: 20px property to create spacing between buttons
  • The solution includes styling for button appearance, hover effects, and equal width sizing

Current Status:

  • The original poster is unclear about where to implement the provided code
  • A third user has requested the page URL to investigate further
  • The issue remains unresolved and requires additional guidance on code placement
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

IMG_4835.jpeg
IMG_4835.jpeg3024×4032 2.81 MB

Hello. I have two buttons on shopify rich text dawn theme. I changed the layout to inline under section-rich-text.css. However the buttons have no space in between on desktop or mobile. Can someone help. Ideally i want space and the buttons to be the same width

2

@Rcard Here’s a template you can work off of and refine as needed:


        Sign In
        Account Registration
    


.button-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }

        .button {
            background-color: #2280fb;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 16px;
            width: 200px; /* Set equal width */
            text-align: center;
            text-decoration: none;
        }

        .button:hover {
            background-color: #145dbd; /* Slightly darker blue on hover */
        }
3

Where am I using this code?

4

Hi @Rcard

Could you share your page link so I can check?