How To Center Everything On Product Page?

[a_hs82]

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:

[AvadaCommerce]

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.

[a_hs82]

Here you go: https://deemzcases.com

[dmwwebartisan]

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

[a_hs82]

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]

@a_hs82 

Please share a screenshot of what do you want!

Thanks!

[a_hs82]

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

[a_hs82]

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

[dmwwebartisan]

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

[a_hs82]

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.

[dmwwebartisan]

@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;}
}

[a_hs82]

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.

 

[dmwwebartisan]

@a_hs82 

ok.

[a_hs82]

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]

@a_hs82 

ok

Thanks!

[dmwwebartisan]

@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;}
}

[a_hs82]

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.

[dmwwebartisan · 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;}
}

[a_hs82]

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]

@a_hs82 

thank!

[Boomcookies0]

This code is not working with mine 😞