dawn theme - center align product information and product images

[jecbon]

Currently, the product information is not centered on the page. it is off to the left how do I make it center? other elements below the product information are perfect. Refer to screenshot for issue. 

[Zworthkey · Accepted solution]

Hii, @jecbon 
Paste this code on top of the section-main-product.css file.

@media screen and (min-width: 990px){
.product__info-wrapper.grid__item {
    margin-left: 18% !important;
}
}

Thank You.

[Zworthkey · Accepted solution]

@jecbon 
Paste this code on top of the section-main-product.css file.

@media screen and (min-width: 990px){
.product.grid.grid--1-col.grid--2-col-tablet {
    margin-left: 25% !important;
}
}

Thank You.

[Zworthkey · Accepted solution]

Hii, @jecbon 
Paste this code on top of the base.css file.

@media screen and (min-width: 990px){
section#shopify-section-template--15308353667327__main {
    margin-top: 0px !important;
}
}

Thank You.

[dmwwebartisan]

@jecbon 

Please share your store URL!

Thanks!

[jecbon]

Hi i cannot share url currently. it should just be CSS change should it not be ? 

[dmwwebartisan]

@jecbon 

Please share preview URL!

Thanks!

[jecbon]

Please share css change to center product information. 

[jecbon]

or liquid change thank you.

[Zworthkey · Accepted solution]

Hii, @jecbon 
Paste this code on top of the section-main-product.css file.

@media screen and (min-width: 990px){
.product__info-wrapper.grid__item {
    margin-left: 18% !important;
}
}

Thank You.

[jecbon]

thank you sir, but can the product images move aswell ? there is now a gap between the product images and description. 

[Zworthkey]

@jecbon 
Remove the code which I have given you.

[Zworthkey · Accepted solution]

@jecbon 
Paste this code on top of the section-main-product.css file.

@media screen and (min-width: 990px){
.product.grid.grid--1-col.grid--2-col-tablet {
    margin-left: 25% !important;
}
}

Thank You.

[jecbon]

ok, do i add another piece of code ?

[Zworthkey]

Remove the previous code and paste the new code.
Thank You.

[Zworthkey · Accepted solution]

Hii, @jecbon 
Paste this code on top of the base.css file.

@media screen and (min-width: 990px){
section#shopify-section-template--15308353667327__main {
    margin-top: 0px !important;
}
}

Thank You.

[jecbon]

@media screen and (min-width: 990px){
.product.grid.grid--1-col.grid--2-col-tablet {
    margin-left: 25% !important;
}
}

When implementing this code, it makes the image smaller.... i want the image and the text to remain the exact same size but just shift the product information and images to the middle...

[Zworthkey]

ok, remove the code.
I will give you a new code.
Thank You.

[jecbon]

thank you. 

[Zworthkey · Accepted solution]

Paste this code on top of the base.css file.

@media screen and (min-width: 990px){
.product__info-wrapper.grid__item {
    position: relative !important;
    left: 18% !important;
}
.grid__item.product__media-wrapper {
    position: relative !important;
    left: 19% !important;
}
}

[jecbon]

Thank you Sir this is perfect

[Zworthkey]

Most Welcome.

[mjdubarr]

@Zworthkey the code works on desktop but not for mobile. I noticed the footer header before the links, called "quick links", in mine, is not centered. How can I center this?

[morethanaskirt]

I'd also like to know.