Text spacing on Dawn theme mobile

Store Design

Topic summary

A user is experiencing narrow, condensed text on mobile view across their Dawn theme Shopify store. The text appears centered and doesn’t utilize the full screen width.

Solution Provided:
A community member shared custom CSS code to address the issue by:

  • Removing max-width restrictions on mobile devices
  • Adding padding (1.5rem) to prevent text from touching screen edges
  • Adjusting line-height and letter-spacing for better readability

The code targets .page-width, .rich-text__wrapper, and other section classes using a media query for screens under 749px.

Current Status:
The CSS fix largely resolved the spacing issue, but created a new problem: some titles now break into two lines instead of remaining on one line. The user is seeking a solution to this secondary issue. Multiple community members have requested the website URL to provide more targeted assistance.

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

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.

1 Like
2

hey @Anonymous share the URLs of your website plz

3

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 :blush:

4

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?

5

Hello @Anonymous kindly share the URLs of your website.