How to center “Image with text” images Dawn theme

Solved

How to center “Image with text” images Dawn theme

Floofnboop
Tourist
11 0 2

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 

 

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1785 3079

This is an accepted solution.

Hi @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

 



Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

View solution in original post

Replies 8 (8)

GemPages
Shopify Partner
5625 1261 1232

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

 

2. add my code  above the </body> tag on Theme.liquid:

 

<style>

	#shopify-section-template--17613631684883__6312aff5-857e-40e5-b3f8-8376f7394cc6 .image-with-text__grid {
		flex-direction: column;
    		justify-content: center;
    		align-items: center;
	}

</style>

 

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

PageFly-Victor
Shopify Partner
7865 1785 3079

This is an accepted solution.

Hi @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

 



Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

Floofnboop
Tourist
11 0 2

worked, thanks!

PageFly-Victor
Shopify Partner
7865 1785 3079

You are welcome. I'm glad when I can help you 😍

Dax-Hypebrickz
Visitor
1 0 0

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

ashbluff
Visitor
1 0 0

I have the same issue. Please help

ghoni
Shopify Partner
2 0 0

Thanks a lot

M Ghoni
Thanks

Jahid-KlinKode
Excursionist
145 1 5

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.