How can I change the margins for a rich text section?

Store Design
,
1

Hi,

I would like to reduce the margin size for a rich text section so that the margins are the same as the elements in my header and on other pages.

How can I achieve this with code?

I have attached a screenshot for reference.

Please only share a solution if it won’t cause issues with another part of my website.

Thanks in advance!

Screenshot 2025-10-21 at 16.31.23
Screenshot 2025-10-21 at 16.31.231920×989 119 KB

1 Like
2

I’d undo this rule:

.rich-text__wrapper {
  ...
  margin:0; /* remove this line */
}

And then these – remove max-width lines altogether:

  .rich-text__blocks {
    /* max-width: 50rem; */
    max-width: 130rem;
  }
}

@media screen and (min-width: 990px) {
  .rich-text__blocks {
    /* max-width: 78rem; */
    max-width: 130rem;
  }
}

If you do this, width of text in rich text section will match the site width, which is up to 1600px with your current settings.
This, probably, is too wide for comfortable reading though.

3

@atmos-art can you please share this page link?

4

This can be done via CSS. But I cannot give you here directly if without seeing the code of this page. The page URL here is required.

5

Hello @atmos-art,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.section-rich-text .page-width {
  padding-left: var(--padding-inline-sm);
  padding-right: var(--padding-inline-sm);
}

@media screen and (min-width: 750px) {
  .section-rich-text .page-width {
    padding-left: var(--padding-inline-lg);
    padding-right: var(--padding-inline-lg);
  }
}

Thanks!

6

Hi, which code file can I find “.rich-text__wrapper {“ inside? Thanks