How to center image with text in Dawn theme?

Solved

How to center image with text in Dawn theme?

AA567
Visitor
1 0 0

Does anyone know of a way to make the image with text centred in dawn theme.

Accepted Solution (1)

GemPages
Shopify Partner
5625 1262 1278

This is an accepted solution.

Hi @AA567,

 

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_3-1679450922441.png

 

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

<style>
	.image-with-text .image-with-text__grid {
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
	}
	.image-with-text .image-with-text__content .image-with-text__heading, 
	.image-with-text .image-with-text__content .image-with-text__text,
	.image-with-text .image-with-text__content .button {
		align-self: center !important;
		text-align: center !important;
	}
</style>

 

Eg: 

GemPages_4-1679450994690.png

 

The Image with text show like this when you add my code:

GemPages_5-1679451013008.png

 

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

View solution in original post

Reply 1 (1)

GemPages
Shopify Partner
5625 1262 1278

This is an accepted solution.

Hi @AA567,

 

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_3-1679450922441.png

 

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

<style>
	.image-with-text .image-with-text__grid {
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
	}
	.image-with-text .image-with-text__content .image-with-text__heading, 
	.image-with-text .image-with-text__content .image-with-text__text,
	.image-with-text .image-with-text__content .button {
		align-self: center !important;
		text-align: center !important;
	}
</style>

 

Eg: 

GemPages_4-1679450994690.png

 

The Image with text show like this when you add my code:

GemPages_5-1679451013008.png

 

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