How can I ensure spaces are coming across from rich textbox

Shopify Discussion

Topic summary

A user is experiencing an issue with spaces not displaying correctly from a rich text box on their custom Shopify theme’s About Us page.

Problem Details:

  • Spaces from the rich textbox section are not rendering properly
  • Issue occurs on a custom theme at maxwellco.store/pages/about-us

Code Provided:
The user shared their current section-rich-text.css file, which includes:

  • Flexbox-based layout with centered content
  • Responsive breakpoints at 750px and 990px
  • Styling for text blocks, buttons, and wrapper elements
  • overflow-wrap: break-word applied to all child elements

Current Status:
The discussion remains open with no responses yet. The user is seeking help to diagnose why spacing isn’t being preserved from the rich text input to the rendered output.

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

Hi

I want to ensure that the spaces are coming across from the text box on the richtext section.

Please note this is a custom theme.

https://maxwellco.store/pages/about-us

Thank you for your help!

Below is the code that I currently have in assests/section-rich-text.css

.rich-text {
  z-index: 1;
}

.rich-text__wrapper {
  display: flex;
  justify-content: center;
  width: calc(100% - 4rem / var(--font-body-scale));
}

.rich-text:not(.rich-text--full-width) .rich-text__wrapper {
  margin: auto;
  width: calc(100% - 8rem / var(--font-body-scale));
}

.rich-text__blocks {
  width: 100%;
}

@media screen and (min-width: 750px) {
  .rich-text__wrapper {
    width: 100%;
  }

  .rich-text__wrapper--left {
    justify-content: flex-start;
  }

  .rich-text__wrapper--right {
    justify-content: flex-end;
  }

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

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

.rich-text__blocks * {
  overflow-wrap: break-word;
}

.rich-text__blocks > * {
  margin-top: 0;
  margin-bottom: 0;
}

.rich-text__blocks > * + * {
  margin-top: 2rem;
}

.rich-text__blocks > * + a {
  margin-top: 3rem;
}

.rich-text__buttons {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  max-width: 45rem;
  word-break: break-word;
}

.rich-text__buttons--multiple > * {
  flex-grow: 1;
  min-width: 22rem;
}

.rich-text__buttons + .rich-text__buttons {
  margin-top: 1rem;
}

.rich-text__blocks.left .rich-text__buttons {
  justify-content: flex-start;
}

.rich-text__blocks.right .rich-text__buttons {
  justify-content: flex-end;
}