Re: How to center image in cart page DAWN Theme

Solved

How to center image in cart page DAWN Theme

INKLY
Explorer
106 0 9

Hi I optimised my page for mobiles but it looks awful on desktop any idea how I can center the image section on desktop without changing the mobile version? Thank you for your help ! 

INKLY_0-1715186360824.png

INKLY_1-1715186467431.png

 

Accepted Solution (1)
GabrielS
Shopify Partner
483 106 114

This is an accepted solution.

You can center the image along with the buttons by using the following CSS:

@media (min-width:768px) {
.section-template--19454625448201__image_with_text_gqapcM-padding .image-with-text__grid {
  display: block;
}
.section-template--19454625448201__image_with_text_gqapcM-padding .image-with-text__media-item,
.cart__blocks {
margin: 0 auto;
}
}

 

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.

View solution in original post

Replies 8 (8)

INKLY
Explorer
106 0 9

And if it's possible to center the checkout buttons even better! 🙏

GabrielS
Shopify Partner
483 106 114

Hello,

 

Centering an image is pretty straight forward, and can be done with a similar CSS:

@media (min-width:768px) {
img {
margin: 0 auto;
}
}

 The above code would affect all images on your website - you will want it adjusted to target only that image. 

 

For further assistance, feel free to share your website link.

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
INKLY
Explorer
106 0 9

Hi @GabrielS  thank you for your answer, how can I target only that image 

GabrielS
Shopify Partner
483 106 114

Well, as I've stated above, I'd need to see the website.

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
INKLY
Explorer
106 0 9

Sorry I missed that part of your message...

 

Website URL: https://inkly.fr/

 

Thank you ! 🙏

GabrielS
Shopify Partner
483 106 114

This is an accepted solution.

You can center the image along with the buttons by using the following CSS:

@media (min-width:768px) {
.section-template--19454625448201__image_with_text_gqapcM-padding .image-with-text__grid {
  display: block;
}
.section-template--19454625448201__image_with_text_gqapcM-padding .image-with-text__media-item,
.cart__blocks {
margin: 0 auto;
}
}

 

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
INKLY
Explorer
106 0 9

Thank you so much ! @GabrielS 

INKLY
Explorer
106 0 9

Hi @GabrielS your solution worked for a bit, but for some reason, the image + text section is now not centered again on desktop. Do you happen to know why? Could it be due to some recent CSS modifications I made? Thank you for your help. 

 

website URL: https://inkly.fr/cart

INKLY_0-1715698681013.png