How can I adjust text width on Dawn theme's home page?

Store Design
,

Topic summary

Main issue: Widen and left-align the “Image with Text” section’s title and text on the Dawn theme home page to match the menu alignment.

Context and constraints:

  • Not adjustable via the theme editor; requires code changes. Store preview link and a screenshot were shared.

Implemented solution (home page):

  • CSS added to the end of base.css: .grid__item .image-with-text__content { padding-left: 0; }
  • Result: Alignment fixed. Scope: affects all pages, not just the About page.

Follow-up issue (blog pages):

  • Blog “Stories” text remained too narrow; prior CSS didn’t apply because blogs use a different section/template.

Implemented solution (blog pages):

  • Additional custom code added in theme.liquid (above ) to target the blog layout. The exact snippet wasn’t visible in the thread.
  • Result: User confirmed the blog layout is now corrected.

Status and outcomes:

  • Home page and blog page alignment/width issues resolved via CSS/theme.liquid edits.
  • No outstanding questions noted.

Notes:

  • A screenshot was referenced but not essential to the final fixes.
  • theme.liquid and base.css are Shopify theme files used for global styling and layout overrides.
Summarized with AI on December 30. AI used: gpt-5.
1

Hi

How can I widen the title and text on the “Image with Text” content section on the home page?

So that it is aligned with the left of the menu.

Dawn theme.

Screenshot attached.

Thanks!

widen.png
widen.png1627×972 334 KB

2

Hello, @cdgerard

It cannot be modified in the editor and can only be modified using code. Please share the store URL so that I can assist you.

3

https://kl61t2nkoblcpape-61358440707.shopifypreview.com

Thanks AnneLuo

4

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

1 Like
5

@cdgerard - please add this css to the very end of your base.css file and check

.grid__item .image-with-text__content{padding-left: 0;}
6

This has solved the issue. thanks a lot!

Question - has this affected only the ABOUT page or will that change other pages?

7

All the pages

8

I have a text alignment issue in the blog pages. The text is too narrow and your code hasn’t changed it.

Please see here in the STORIES section.

https://kl61t2nkoblcpape-61358440707.shopifypreview.com

9

They are two different sections, so the code I provide don’t affect the blog pages.

If you want to modify the blog page. You can try this code by following these steps:

Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

1 Like
10

Works, Thanks very much!