How to center “Image with text” images Dawn theme

Store Design
, ,

Topic summary

Users need help centering images in the “Image with text” section of Shopify’s Dawn theme on desktop (already centered on mobile).

Solutions provided:

  • GemPages suggested adding custom CSS code via Edit Code → Theme → inserting code above </body> tag
  • PageFly-Victor provided a more specific solution:
    • Navigate to: Online Store → Theme → Edit Code
    • Open file: component-image-with-text.css
    • Add CSS targeting .image-with-text__grid with media query for screens min-width 767px
    • Sets max-width: 50% and margin: auto !important to center images

Original poster confirmed the solution worked.

Follow-up issue: Another user (Dax-Hypebrickz) successfully centered images but now has gaps on both sides regardless of image size uploaded, seeking help to fill these gaps in desktop view.

Additional users expressed interest in the same solution. One commenter referenced a YouTube tutorial for centering collection grid links on Dawn theme images.

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

I have to “Image with text” sections on the bottom of my homepage that i need the IMAGE to center on Desktop. It’s centered on mobile already. How could I achieve this?

Floofnboop.com

Floof1

1 Like
2

Hi @Floofnboop ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved.

  1. Go to Edit code on Online Store:

GemPages_0-1678325242307.png
GemPages_0-1678325242307.png400×163 25.3 KB

  1. add my code above the tag on Theme.liquid:

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

2 Likes
3

Hi [email removed]Floofnboop,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file component-image-with-text.css

Step 3: Paste the below code at bottom of the file → Save

@media(min-width:767px){
.image-with-text__grid .image-with-text__text-item:has(>div:empty){
display:none !important
}
.image-with-text__grid:has(.image-with-text__text-item > div:empty) .image-with-text__media-item{
    max-width: 50% !important;
    margin: auto !important;
}
}

PageFlyVictor_0-1678327252775.png
PageFlyVictor_0-1678327252775.png2720×1686 271 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

2 Likes
4

worked, thanks!

5

You are welcome. I’m glad when I can help you :heart_eyes:

6

Hi there,

Thanks for the help; after I center the image, how can I fill this gap on this image?
There is a gap on both side, and no matter what size of the image that I upload it just have 2 gap on the size during the PC view, can you please help, thanks.

Screenshot 2023-06-07 154613.png
Screenshot 2023-06-07 154613.png1026×931 115 KB

7

Thanks a lot

8

Hi @Floofnboop , check out a helpful YouTube tutorial on centering collection grid links on images in the Shopify Dawn Theme: https://www.youtube.com/watch?v=LNCzj6cxw1s.

9

I have the same issue. Please help