How can I center my entire product page on both mobile and desktop?

[jennarose]

Hi!

URL is www.daughterofanangel.com

I am trying to center entire product page on both mobile and desktop - currentlty my product photo on desk top is not centered.

Thanks in advance

[PageFly-Richard]

Hi @jennarose ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

.product.product--thumbnail_slider {
    justify-content: center;
    flex-wrap: wrap;
}
.product__info-wrapper.grid__item {
    max-width: 60% !important;
    width: 60% !important;
    margin: 0 auto !important;
    padding-left: 0;
}
.product-form__quantity,
#textFieldDiv_rxteczyoi,
.product-form__buttons {
    margin: 0 auto !important;
}
#textfieldapp p {
    text-align: center !important;
}
@media screen and (max-width: 749px) {
    .product__info-wrapper.grid__item {
        width: 100% !important;
        max-width: 100% !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[jennarose]

Thanks! that worked but now the size pills are off centered

[PageFly-Richard]

Hi @jennarose ,

I checked, it seems to work fine, right?