How can I center the text on my image?

[Elias10]

Hi,

I want to change the placement of my text on my "Image with text". Look at my website and at my picture to see how i want. I want it centered.

Website: https://d8106d-4.myshopify.com/

 

[theycallmemakka]

Hi @Elias10 ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>



@media only screen and (min-width: 749px) {
      #shopify-section-template--20481422000470__bacf1f37-4c23-490c-b126-a897e4af2c8a .page-width,
        #shopify-section-template--20481422000470__217a4d82-8c9c-4b1e-9a09-afe706f59684 .page-width,
        #shopify-section-template--20481422000470__0f09de6c-f12d-4f4f-b54b-29c25edae114 .page-width,
        #shopify-section-template--20481422000470__ba526139-b516-4f1e-8160-27a2d4e8a474 .page-width{
            margin: 0px!important;
            max-width: 100%;
        }
    
    #shopify-section-template--20481422000470__bacf1f37-4c23-490c-b126-a897e4af2c8a .image-with-text__grid,
    #shopify-section-template--20481422000470__217a4d82-8c9c-4b1e-9a09-afe706f59684 .image-with-text__grid,
    #shopify-section-template--20481422000470__0f09de6c-f12d-4f4f-b54b-29c25edae114 .image-with-text__grid,
    #shopify-section-template--20481422000470__ba526139-b516-4f1e-8160-27a2d4e8a474 .image-with-text__grid{
        display: flex;
    }
    
    #shopify-section-template--20481422000470__bacf1f37-4c23-490c-b126-a897e4af2c8a .image-with-text__media-item,
    #shopify-section-template--20481422000470__217a4d82-8c9c-4b1e-9a09-afe706f59684 .image-with-text__media-item,
    #shopify-section-template--20481422000470__0f09de6c-f12d-4f4f-b54b-29c25edae114 .image-with-text__media-item,
    #shopify-section-template--20481422000470__ba526139-b516-4f1e-8160-27a2d4e8a474 .image-with-text__media-item{
        flex: 0 1 55%;
    }
    #shopify-section-template--20481422000470__bacf1f37-4c23-490c-b126-a897e4af2c8a .image-with-text__text-item,
    #shopify-section-template--20481422000470__217a4d82-8c9c-4b1e-9a09-afe706f59684 .image-with-text__text-item,
    #shopify-section-template--20481422000470__0f09de6c-f12d-4f4f-b54b-29c25edae114 .image-with-text__text-item,
    #shopify-section-template--20481422000470__ba526139-b516-4f1e-8160-27a2d4e8a474 .image-with-text__text-item{
        flex: 0 1 45%;
    }

}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Elias10]

it worked, but the thing is the image is getting bigger. See picture. Are you able to change it? Thanks

 

[theycallmemakka · Accepted solution]

you want it to be 50% 50%

[Elias10]

thanks