Solved

Align rich text buttons horizontally

jmwages17
New Member
5 0 0

I want to add two rich text buttons to my home page, but I want them aligned horizontally with a bit of space in between them. 

 

I'm able to align them side by side but I can't get the space in between them. 

 

jmwages17_0-1716225014230.png

 

Accepted Solution (1)
BSSCommerce-HDL
Shopify Expert
666 204 219

This is an accepted solution.

Hi @jmwages17

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716226003725.png

 

Step 2: Search file base.css, theme.css or styles.css

BSSTechVenture_1-1716226009269.png

 

Step 3: Insert the below code at the bottom of the file -> Save

.rich-text__blocks {
  margin-left: -10px !important;
} 

.rich-text__blocks .rich-text__buttons {
  margin-left: 10px !important;
}

 

Here is result: 

BSSTechVenture_2-1716226046815.png

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 5 (5)

Ollie
Shopify Staff
2423 454 408

Hey @jmwages17.

 

Thanks for reaching out. 

 

Could you let us know which theme you are using for your online store? 

 

If you are unsure about which theme is live in your store, you can navigate to the Theme Editor and select the three dots that are appearing towards the top left of the page. I took a screenshot from my test store to show you the section I am referring to: 

 

 

Looking forward to your response.  

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

jmwages17
New Member
5 0 0

I am using Dawn 13.0.1

BSSCommerce-HDL
Shopify Expert
666 204 219

Hi @jmwages17Can you kindly share the details of your problem (link page) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

jmwages17
New Member
5 0 0

Hey @BSSCommerce-HDL !

 

Here is the link to the page: https://jmadisonandco.com/

BSSCommerce-HDL
Shopify Expert
666 204 219

This is an accepted solution.

Hi @jmwages17

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716226003725.png

 

Step 2: Search file base.css, theme.css or styles.css

BSSTechVenture_1-1716226009269.png

 

Step 3: Insert the below code at the bottom of the file -> Save

.rich-text__blocks {
  margin-left: -10px !important;
} 

.rich-text__blocks .rich-text__buttons {
  margin-left: 10px !important;
}

 

Here is result: 

BSSTechVenture_2-1716226046815.png

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development