Re: centering blocks on product page

Solved

centering blocks on product page

MiyuStore
Tourist
8 0 2

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.

 

1000.PNG

 

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

there is no password.

 

thanks in advance!

Miramart

Accepted Solution (1)

GTLOfficial
Shopify Partner
273 51 52

This is an 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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

View solution in original post

Replies 8 (8)

ZestardTech
Shopify Partner
5636 1031 1359

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

ZestardTech_0-1718100967495.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
MiyuStore
Tourist
8 0 2

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

Rishihuptech
Shopify Partner
643 118 129

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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
MiyuStore
Tourist
8 0 2

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

Rishihuptech
Shopify Partner
643 118 129

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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

GTLOfficial
Shopify Partner
273 51 52

This is an 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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
MiyuStore
Tourist
8 0 2

@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
Shopify Partner
273 51 52

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

dfbdfgbcfg.png

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh