Dawn theme - center align product information and product images

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.

@jecbon

Please share your store URL!

Thanks!

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

@jecbon

Please share preview URL!

Thanks!

Please share css change to center product information.

or liquid change thank you.

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.

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

@jecbon
Remove the code which I have given you.

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

ok, do i add another piece of code ?

1 Like

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

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.

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

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

thank you.

1 Like

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

Thank you Sir this is perfect

1 Like

Most Welcome.

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

1 Like