How to center “Image with text” images Dawn theme

[Floofnboop]

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

[GemPages]

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:

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

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

[PageFly-Victor]

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;
}
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[Floofnboop]

worked, thanks!

[PageFly-Victor]

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

[Dax-Hypebrickz]

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.

[ghoni]

Thanks a lot

[Jahid-KlinKode]

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.

[ashbluff]

I have the same issue. Please help