Text spacing on Dawn theme mobile

[Anonymous]

I am trying to find a solution to spread the text on the mobile view only on Dawn theme. Right now the writing throughout the entire site on mobile is narrow and condensed in the middle. Thank you. 

[Mustafa_Ali]

hey @Anonymous share the URLs of your website plz

[goldi07 · Accepted solution]

Hello @Anonymous 

To fix the narrow/condensed text issue on mobile in the Dawn theme, you'll need to adjust the padding or max-width applied to text containers only on small screens. This issue usually comes from max-width constraints or padding in .page-width, .rich-text, or .section classes.

Here's a quick fix via custom CSS:
1. Go to Online Store > Themes > Customize.

2. Click the “three dots” > Edit code.

3. Open the base.css or theme.css file under assets/.

4. Scroll to the bottom and paste the following:

@media screen and (max-width: 749px) {
  .page-width {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 100% !important;
  }

  .rich-text__wrapper,
  .rich-text__blocks,
  .section {
    max-width: 100% !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: left;
  }

  h1, h2, h3, p {
    line-height: 1.6;
    letter-spacing: 0.02em;
  }
}

What this does:
. Removes narrow max-width restrictions on mobile.

. Adds gentle left/right padding to prevent text from hugging screen edges.

. Improves readability with adjusted line-height and letter-spacing.

Thank you 😊

[Anonymous]

Hi Goldi, 

Awesome that worked for the most part, thank you. But now after adding that code, on some of the titles I have, it moved it to 2 lines instead of keeping it all one line. Can that part be fixed?

[websensepro]

Hello @Anonymous kindly share the URLs of your website.