How do I center the text under the images of my featured products?

Store Design
1

Hello!
I would like to be able to have the text with the name of the product and the price be perfectly centered under the image of the product in my featured products on my home page. For some reason at the moment the text is slightly to the left of its respective image instead of being perfectly centered underneath. Any help would be appreciated. I included a sample of what my page currently looks like with the actual products censored for privacy. The black is the positioning of the shirts and the red is the positioning of the text. Thank you!

Question.png
Question.png2314Ă—902 59.7 KB

1 Like
2

Hello @Flowvolt ,

Please share your store URL with password if its protected? So i can give you better solution. Thanks!

Thank You :slightly_smiling_face:

3

Here it is: https://flowvolt.myshopify.com/

As you can see the product images in home under “Featured Products” are not aligned with their text descriptions. If you could also tell me how to move the “Featured Products” text to the center that would also be a big help. Thanks!

2 Likes
4

Hello @Flowvolt
please add this css Asset > base.css and paste this at the bottom of the file:-

.card__information {
text-align: center!important;
}
.card-information {
text-align: center!important;
}
5

Hi @Flowvolt

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.card__information * {
    text-align: center;
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
6

Thank you very much! It worked great! By any chance do you know how to Center the previously “featured products” text above the shirts as well (I changed it to The Darkness Collection) so that it stands perfectly above them centered. I attached an image so its eaiser to see what im talking about.

Screenshot 2023-08-27 120236.png
Screenshot 2023-08-27 120236.png2312Ă—924 148 KB

1 Like
7

Your Welcome. Try this one for the title.

Same Instruction.

h2.title.inline-richtext.h2.scroll-trigger.animate--slide-in {
    text-align: center;
}

And Save.

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
8

Your a real life saver man! Thanks so much for the help!

1 Like
9

Hey how would I go about making the add to cart button centred on the product tile in featured collection? In the dawn theme Thanks

shop2.jpg
shop2.jpg999Ă—399 41.5 KB

10

Hi @3D-Cast

Thanks for reaching out, please share your store URL. Thanks!