Hi, how can I center an “image with text” section that has only image? I just want to center an image horizontally without any text. For example:
I just want to use an image as a divider? Is there another easier way?
Another example:
Topic summary
Goal: center a single image (used as a divider) in Dawn’s “Image with text” section, with no text content.
Proposed fix: add custom CSS (in base.css) targeting the specific section ID to: center the grid on desktop (justify-content: center), hide the text column when unused, and constrain image width (~300px). This applies for screens ≥750px.
Outcome: Original poster confirmed the CSS solved their homepage divider image centering.
Follow‑ups: Two other merchants reported the snippet didn’t work for their stores. One needs a divider centered between two products; it’s centered on mobile but not on desktop, likely due to two‑column layout alignment. A helper requested screenshots; one was provided. A YouTube tutorial link offering general guidance on centering images in Dawn was shared.
Notes: The provided CSS is section‑ID specific; each store must adjust selectors to their own section IDs. Desktop alignment depends on the grid container; hiding the unused text column may be necessary.
Status: Original issue resolved. Later cases remain open pending store‑specific CSS adjustments and further details.
1 Like
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hey, thanks for the response.
Site: https://ilimilly.myshopify.com/
password: creugg
I just wanna center for example the “image with section” widget with the little bee on the homepage
1 Like
can you try this code
- Go to Online Store->Theme->Edit code
- Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 750px) {
#shopify-section-template--15307744673979__16429426963923e0ed .grid--2-col-tablet .grid__item {
max-width: 300px;
}
#shopify-section-template--15307744673979__16429426963923e0ed .image-with-text__grid {
justify-content: center;
}
#shopify-section-template--15307744673979__16429426963923e0ed .image-with-text__grid .image-with-text__text-item.grid__item {
display: none;
}
}
1 Like
Thank you very much, it’s perfect!
Hello! Tried this code but doesn’t seem to work for me. Can you help with this? pyro555.com - pass: laneocinco555
@KetanKumar I tried your code but it’s not working for me. can you help?
https://volcano-king-coffee.myshopify.com/
password: dowsah
1 Like
can you please provide screenshot further issue
@KetanKumar when it’s in mobile mode the divider is centered but in desktop mode it’s not. I know the text and button layout is the reason but I want to know how to adjust the alignment. Thanks
Hi @Xaxoxuxu , need to center the image horizontally in the Shopify Dawn Theme? Check out this YouTube video: https://www.youtube.com/watch?v=LNCzj6cxw1s.