How To Center “Image With Text” Images Dawn Theme

Shopify Discussion

Topic summary

A user seeks help centering images in the “Image with Text” section of Shopify’s Dawn theme.

Initial Troubleshooting:

  • Store URL sharing encountered formatting issues in early messages
  • Preview link initially didn’t work, then corrected to working store URL

Proposed Solution:
A CSS code snippet was provided with these steps:

  1. Navigate to Online Store → Theme → Edit code
  2. Open Asset → base.css
  3. Paste custom CSS at bottom of file

The code targets the specific section template and applies:

  • Text alignment centering
  • Width adjustments (100%)
  • Margin settings (auto)
  • Flex-direction modifications for the grid layout

Current Status:
The original poster reported the first CSS solution “not working.” A second, alternative CSS code snippet was then provided targeting the grid container with different flex properties. The helper confirmed the code works on their end (included screenshot proof), but final resolution from the original poster is pending.

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

How To Center “Image With Text” Images Dawn Theme

2

@Denzel

oh sorry for that issue can you please sent store url

1 Like
3

https://otg1prwcht0c173f-82304762175.shopifypreview.com

https://t-monae1.myshopify.com/

pw:monae1

1 Like
4

@Denzel

Thanks bt your link doesn’t work

KetanKumar_0-1695144506670.png
KetanKumar_0-1695144506670.png1920×934 28.3 KB

1 Like
5

https://t-monae1.myshopify.com/

1 Like
6

@Denzel

sorry boss same here…

1 Like
7

@Denzel

Thanks

can you please add this code.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 750px) {
.section-template--20857682723135__3600adda-7395-42b1-bfb0-263707af152e-padding .image-with-text__text.rte.body {
text-align: center;    
}
.section-template--20857682723135__3600adda-7395-42b1-bfb0-263707af152e-padding .image-with-text__heading {width: 100%; text-align: center;}  
  .section-template--20857682723135__3600adda-7395-42b1-bfb0-263707af152e-padding .image-with-text__content .image-with-text__text+.button {
    margin: 3rem auto 0;
} 
    }
8

Not working

1 Like
9

@Denzel

sorry bt i have checked its work

KetanKumar_0-1695179946190.png
KetanKumar_0-1695179946190.png1920×934 171 KB

10

@Denzel

oh sorry for that issue

can you try this code also

.section-template--20857682723135__3600adda-7395-42b1-bfb0-263707af152e-padding .image-with-text__grid {
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.section-template--20857682723135__3600adda-7395-42b1-bfb0-263707af152e-padding .grid__item {
    margin: 0px auto;
}