Need help adding some padding to the left of Image with Text section on Dawn

Store Design
, ,

Topic summary

A user needs to adjust the positioning of an Image with Text section in their Shopify Dawn theme to better center it on the page.

Initial Request:

  • The second Image with Text section requires left padding to achieve proper centering
  • An image was provided showing the current layout issue

Solution Provided:
A community member offered CSS code to be added to the theme’s stylesheet (base.css, style.css, or theme.css):

First attempt: Adjusted grid item width to 50%

Refined solution: After clarification that the entire section needed to shift right while maintaining image size, updated CSS was provided:

  • Sets the section width to 80%
  • Adds 20% left margin to move the section rightward
  • Targets the specific section using its template ID

Implementation: Code should be added via Shopify admin → Online Store → Themes → Edit code → Assets folder → appropriate CSS file.

The discussion appears resolved with the second CSS solution addressing the centering requirements.

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

Need to add some padding to the left to center the second Image with Text section.

MikaelMo_0-1713468105253.png
MikaelMo_0-1713468105253.png1784Ă—796 106 KB

1 Like
2

Hi @MikaelMo

I dont think i catch up what you mean.

Like this?

Made4uoRibe_0-1713469705184.png
Made4uoRibe_0-1713469705184.png1430Ă—725 122 KB

if it is here is the code i used.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.section-template--21909981364525__image_with_text_7TWWhj-padding .grid--3-col-tablet .grid__item {
    width: 50%;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Thanks for your answer!

Not quite, the center on the picture you showed me is correct, but the picture should be the same size as is.
So basically, just move the entire section a bit to the right sĂĄ it will be centered below the section above. Get me?

4

Check this one then.

Same Instruction.

.section-template--21909981364525__image_with_text_7TWWhj-padding .image-with-text.image-with-text--no-overlap.isolate {
    width: 80%;
    margin-left: 20%;
}

And Save.

Result:

Made4uoRibe_0-1713471532141.png
Made4uoRibe_0-1713471532141.png1272Ă—618 214 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!