DAWN THEME: CENTER PRODUCT INFORMATION TO PAGE

[skymochi]

Hi, in need of some assistance!

GOALS:

1. CENTER PRODUCT INFORMATION TO RED BOX OUTLINED

2. CENTER TEXT OF PRODUCT INFORMATION.

CURRENTLY: USING 

{
text-align: center;
}

However, the price, out of stock, and share button do not center.

[Team_OSC]

Hi @skymochi ,

Please share your website URL.

[skymochi]

https://07f83a.myshopify.com/products/dress
password: koredoko

[laddisahsi]

Hi @skymochi 

You can follow the following steps:

1. Please remove the width from the html.
2. Please go to the Online Store.
3. Then Edit Code.
4. Please find the theme.liquid file.
5. Please add code before closing the tag </head> tag.

<style>
.product__info-wrapper.grid__item {
    margin-left: 6% !important;
    margin-top: 8% !important;
}
</style>

.

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

[skymochi]

Hi, I am a bit confused, I tried to put this in liquid but it had no effect.

What width am I removing? And where do I add </Head>?

[laddisahsi]

@skymochi 

Just copy mine full code

<style>
.product__info-wrapper.grid__item {
    margin-left: 6% !important;
    margin-top: 8% !important;
}
</style>

Just paste in theme.liquid before closing the </head>

This code will work.

Thanks

[skymochi]

Thank you, do you have a solution to center PRICE + OUT OF STOCK + SHARE?

[laddisahsi]

@skymochi 

Use this css

p#Inventory-template--15425262977097__main {
    margin-left: 36% !important;
}

#price-template--15425262977097__main .price.price--large.price--sold-out.price--show-badge {
    margin-left: 10% !important;
}

Please check

Thanks

[skymochi]

Hi, Thank you.
Last question. Is there to isolate the margin to DESKTOP ONLY? On mobile, it created a white area that moved information into this space.

margin-left: 6% !important;

[laddisahsi]

Yes its for desktop only.

[Team_OSC · Accepted solution]

Hi @skymochi ,

This is the code for share button to center

.share-button__button {
margin-left: auto;
margin-right: auto;
}

To fix on the mobile 

Here is the code,

@media (max-width: 765px){
.product__info-wrapper.grid__item {
     margin-top: 0 !important; 
     margin-left: 0 !important;
}
}

Paste this code with @laddisahsi gave you.

Hope this code will work.

Best Regards

Team_OSC

[skymochi]

Mobile is now centered! However, when I swipe left,  there is an overflow. It extends that white boundary from the screenshot in my last message. Only when it's swiped upon. Is there a way to remove the "padding"?

[Team_OSC]

@media screen and (max-width: 749px) {
.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: -1rem;
    margin-right: 0;
}
}

Hope this code will work to hide overflow.

Best Regards

Team_OSC