How to format rich text for mobile version?

Store Design
, ,

Topic summary

Issue: Rich text blocks render extremely narrow on mobile (often one letter per line). The goal is to widen them on mobile and later reduce their font/box size specifically for mobile.

Initial fixes suggested:

  • Add mobile-specific CSS (via theme.liquid) to remove padding and paragraph left/right margins, first targeting a specific section ID. Others suggested generic selectors (.rich-text-description p) with margin resets; some also added text centering.

Outcome: The section-specific fix worked, but only on the homepage. A broader solution was then provided: apply a max-width: 767px media query to .rich-text-description and its paragraphs sitewide, unsetting padding and margins to affect all rich text sections.

Further request: Make mobile rich text smaller (font and box). A reply suggested adding CSS (in base.css or a custom CSS file) to adjust heading and paragraph font sizes, but it used a min-width: 767px media query. The user then asked which file to edit (custom CSS vs theme.liquid), indicating confusion about where to place CSS.

Status: Partially resolved (widening achieved; global mobile margins/padding addressed). Mobile-specific sizing and correct file placement remain open. Screenshots were provided to show results.

Summarized with AI on December 22. AI used: gpt-5.
12

Hello! @Tinctoria Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
@media only screen and (min-width: 767px){
body .rich-text-content .content-heading {
    font-size: 26px;
}
body .rich-text-description p {
    font-size: 13px;
}
}

Rishihuptech_0-1722937568693.png
Rishihuptech_0-1722937568693.png585×754 22.1 KB

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.