Solved

How To Center Everything On Product Page?

a_hs82
Excursionist
45 0 5

Hello everyone!

I was wondering if anyone knows how to center everything on my product pages? (title, price, shop pay, buttons, and description) The left align looks extremely unprofessional. I am on the Crave theme. Thanks in advance! Here is a picture:

7DB60DCA-A560-4D76-9827-2F00122F0A57_1_201_a.jpeg

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12267 2545 3687

This is an accepted solution.

@a_hs82 

Please add the following CSS code to your assets/section-main-product.css bottom of the file.

@media screen and (max-width: 749px) {
.product {padding: 0 1.5rem !important;}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 20 (20)

AvadaCommerce
Shopify Partner
3879 839 945

Hi @a_hs82 ,

 

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

banned
a_hs82
Excursionist
45 0 5

Here you go: https://deemzcases.com

dmwwebartisan
Shopify Partner
12267 2545 3687

@a_hs82 

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (max-width: 749px) {
.product__info-container>*+* {
    margin: 1.5rem 0;
    justify-content: center !important;
    text-align: center !important;
}
.product-form__input .quantity {margin: 0 auto !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
a_hs82
Excursionist
45 0 5

It still has a lot more space under the title and almost none on the top on desktop. I think I may have worded my question wrong. I mean the title is not centered top and bottom space wise.

dmwwebartisan
Shopify Partner
12267 2545 3687

@a_hs82 

Please share a screenshot of what do you want!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
a_hs82
Excursionist
45 0 5

Sure thing. It's the original problem- a large space underneath the title. The code fixed it on mobile but not desktop. 

Screen Shot 2022-03-03 at 9.31.50 PM.png

a_hs82
Excursionist
45 0 5

@dmwwebartisan I'm sorry, I'm replying to the wrong forum! The problem for this one is that everything is centered but the product title. 9AB8983D-744D-4469-AEB1-15EBB2249616.jpeg

dmwwebartisan
Shopify Partner
12267 2545 3687

@a_hs82 

Please remove the previously provided CSS code.

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (max-width: 749px) {
.product__info-container>*+* {
    margin: 1.5rem 0;
    justify-content: center !important;
    text-align: center !important;
}
.product-form__input .quantity {margin: 0 auto !important;}
body .product__title {margin-top: 0; text-align: center !important;}
}

 

 Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
a_hs82
Excursionist
45 0 5

Sorry to keep bothering you but now it does not align the buttons as seen below. The title is fixed though so thank you so far.

B273ED6C-7F11-43BF-A7C1-5BF23B199D52.jpeg

dmwwebartisan
Shopify Partner
12267 2545 3687

@a_hs82 

Please remove the previously provided CSS code.

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (max-width: 749px) {
.product__info-container>*+* {
    margin: 1.5rem 0;
    justify-content: center !important;
    text-align: center !important;
}
.product-form__input .quantity {margin: 0 auto !important;}
body .product__title {margin-top: 0; text-align: center !important;}
.product-form__input .select {margin: 0 auto !important;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
a_hs82
Excursionist
45 0 5

Ok, it is closer now but they are still slightly off center. I marked lines at the ends of the title and the ends of the buttons. As you can see, the buttons are not in the center like the title is.

22832356-7A27-4E72-ADB5-0A3769F5280A.jpeg

dmwwebartisan
Shopify Partner
12267 2545 3687

@a_hs82 

ok.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
a_hs82
Excursionist
45 0 5

Yes, you have been very helpful but the buttons are still slightly off center as you see in the picture. Is there anyway to fix it?

dmwwebartisan
Shopify Partner
12267 2545 3687

@a_hs82 

ok

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12267 2545 3687

@a_hs82 

Please remove the previously provided CSS code.

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (max-width: 749px) {
.product__info-container>*+* {
    margin: 1.5rem 0;
    justify-content: center !important;
    text-align: center !important;
}
.product-form__input .quantity {margin: 0 auto !important;}
body .product__title {margin-top: 0; text-align: center !important;}
.product-form__input .select {margin: 0 auto !important;}
.product-form__buttons {max-width: 25rem !important;text-align: center;margin: 0 auto;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
a_hs82
Excursionist
45 0 5

That only made the 'add to cart' and 'buy it now' smaller. That is not what I need. The problem is that the buttons, 'color', 'style', and 'quantity' still are not centered. If you follow the lines I drew on their borders, you will see it does not sit in the middle of other elements. That is the only change needed and then I can mark it as a solution.

image.jpeg

dmwwebartisan
Shopify Partner
12267 2545 3687

This is an accepted solution.

@a_hs82 

Please add the following CSS code to your assets/section-main-product.css bottom of the file.

@media screen and (max-width: 749px) {
.product {padding: 0 1.5rem !important;}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
a_hs82
Excursionist
45 0 5

Centered great now but it also added a weird border to my site. Regardless, I think I can live with it and I thank you for your time and effort!

dmwwebartisan
Shopify Partner
12267 2545 3687

@a_hs82 

thank!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Boomcookies0
Excursionist
16 0 1

This code is not working with mine 😞