How do I add left and right padding between the line and the ''collection'' tittle?

Store Design

Topic summary

A user seeks to adjust spacing between a decorative line and a ‘collection’ title on their Shopify store.

Initial Misunderstanding:
The support team (BSS-TekLabs) initially provides CSS to modify the max-width of rich text blocks, which doesn’t address the actual issue.

Clarification & Solution:
After the user shares screenshots showing they want horizontal padding around the collection heading, BSS-TekLabs provides updated CSS code:

  • Adds left and right margins (40px) to .rich-text__heading
  • Instructions given to add code to base.css or theme.css file via theme editor

Additional Request:
The user also asks how to reduce the thickness of the decorative line. BSS-TekLabs responds with additional CSS targeting .rich-text__blocks:before and .rich-text__blocks:after with reduced padding (0.5px).

Status: The discussion appears resolved with custom CSS solutions provided, though the user hasn’t confirmed final implementation success.

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

Well the whole question is in the tittle

Sans titre.png
Sans titre.png1394×343 15.6 KB

2

Hello @bobylands .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

3

simplicityclothing.ca

4
  • Here is the solution for you @bobylands
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (min-width: 990px) {
    .rich-text__blocks {
        max-width: 50rem !important;
    }
}
  • Here is the result you will achieve:

BSSTekLabs_1-1722260985850.png
BSSTekLabs_1-1722260985850.png1666×681 27.1 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
5

That’s not the problem i am having

I want to increase the distance between ‘‘collection’’ and the line beside it

6

Can you take photos and zone where you want to increase the distance?

7

BSSTekLabs_0-1722261829896.png
BSSTekLabs_0-1722261829896.png1733×871 99.4 KB

Do you want like this @bobylands ?

8

Hi, I’d like it more like this

xddd.png
xddd.png1411×131 4.37 KB

1 Like
9 
@media screen and (min-width: 750px) {
    .rich-text__blocks {
        max-width: 62rem !important;
    }
.rich-text__heading {
     margin-left: 40px !important;
    margin-right: 40px !important;
}
}

Can you try add this code @bobylands

BSSTekLabs_0-1722341219449.png
BSSTekLabs_0-1722341219449.png1573×791 30.5 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you @bobylands .
10

Where do I paste this?

11

BSSTekLabs_0-1722401101537.png
BSSTekLabs_0-1722401101537.png400×183 26.2 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
12

Also, how can I reduce the thickness of the line to match the one just above it?

Thanks

1 Like
13 
.rich-text__blocks:before, .rich-text__blocks:after {
     padding: 0.5px !important;
}

Can you add more code in last line file base.css @bobylands

BSSTekLabs_0-1722437620918.png
BSSTekLabs_0-1722437620918.png1591×538 18.2 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you @bobylands .