dawn theme - center align product information and product images

Solved
jecbon
Excursionist
39 0 9

jecbon_0-1635760261876.png

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. 

 

Accepted Solutions (4)

Accepted Solutions
Zworthkey
Shopify Partner
2567 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

Zworthkey
Shopify Partner
2567 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

Zworthkey
Shopify Partner
2567 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

Zworthkey
Shopify Partner
2567 309 641

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



If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

Replies 19 (19)
dmwwebartisan
Shopify Partner
9824 2236 3077

@jecbon 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
jecbon
Excursionist
39 0 9

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

dmwwebartisan
Shopify Partner
9824 2236 3077

@jecbon 

Please share preview URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
jecbon
Excursionist
39 0 9

Please share css change to center product information. 

jecbon
Excursionist
39 0 9

or liquid change thank you.

Zworthkey
Shopify Partner
2567 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

jecbon
Excursionist
39 0 9

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

Zworthkey
Shopify Partner
2567 309 641

@jecbon 
Remove the code which I have given you.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Zworthkey
Shopify Partner
2567 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post