centering blocks on product page

[MiyuStore]

Hello Shopify champs,

I'm getting trouble centering some blocks on the product page.

I would like to have the "secure payment" and "package include" icons centered all time, no matter which zoom percentage it is applied. on mobile version it is luckily good because of the page size.

i also want to push the description down little bit.

this is the url: https://miramart.be/products/usams-phone-holder

there is no password.

thanks in advance!

Miramart

[ZestardTech]

Hi @MiyuStore 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (min-width:767px){
.product__title {
text-align: center;
}
.product__info-container>*+* {
text-align: center;
}
.delivery-date {
text-align: center;
display: block;
}
.product__inventory {
display: block;
}
product-form.product-form {
text-align: center;
}
form#product-form-template--22883506913629__main {
text-align: center;
}
.product-form__buttons {
max-width: 100%;
}
}

[MiyuStore]

@ZestardTech thanks for the quick reply. but it is unfortunately not working. I don't want to center the product title, price of delivery time. I want only to center the "secure payment" icons and "Package include" icons in regard to the buy button.

[Huptech-Web]

Hello! @MiyuStore Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media only screen and (max-width: 749px) {

    .product__inventory,
    .delivery-date,
    .product__inventory {
        justify-content: center;
    }

    .product__info-container {
        text-align: center;
    }

    .product-form__buttons {
        margin: 0 auto;
    }
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

[MiyuStore]

@Huptech-Web thanks for the quick reply. but it is unfortunately not working. I don't want to center the product title, price of delivery time. I want only to center the "secure payment" icons and "Package include" icons in regard to the buy button.

[Huptech-Web]

Hello! @MiyuStore Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media only screen and (min-width: 750px) {

    .product__text.caption-with-letter-spacing,
    .list-payment {
        max-width: 100% !important;
    }

    .product__text {
        text-align: center;
    }
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

[GTLOfficial · Accepted solution]

Hello @MiyuStore 
Go to online store ---------> themes --------------> actions -------------> edit code  find this file "section-main-product.css" file add this css

ul.icon-with-text.icon-with-text-custom--icon_with_text_custom_L3V3y3,
.product__info-container p.product__text.inline-richtext.caption-with-letter-spacing {
    max-width: 44rem;
}

Go to online store ---------> themes --------------> actions -------------> edit code  find this file "component-list-payment.css" file add this css

@media screen and (min-width: 750px) {
    .list-payment {
        max-width: 44rem;
    }
}

for making description down
use this CSS
Go to online store ---------> themes --------------> actions -------------> edit code  find this file "section-main-product.css" file add this css

.product__info-container .product__description {
    margin: 5rem 0;
}

Please let me know
Thanks

[MiyuStore]

@GTLOfficial thank you man! this is exactly what I wanted. now only the description title needs to be pushed down. But thanks again for this precious help

[GTLOfficial]

Hello @MiyuStore thank you so much
To move description title down you need to edit 
product Description
There is empty space in your product descriptions there is no CSS and code problem
follow these steps