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 !
Topic summary
A Shopify store owner using the Dawn theme needs help centering an image section on the cart page for desktop view while preserving the mobile layout.
Initial Problem:
- Page optimized for mobile displays poorly on desktop
- Wants to center image section and checkout buttons on desktop only
Solution Provided:
A CSS media query targeting desktop screens (min-width: 768px) was suggested:
@media (min-width:768px) {
.section-template--[specific-class] .image-with-text__media-item,
.cart_blocks {
display: block;
margin: 0 auto;
}
}
Current Status:
The solution initially worked but has stopped functioning. The image and text section are no longer centered on desktop, possibly due to recent CSS modifications made by the user.
Outstanding Issue:
The user is seeking help to understand why the centering broke and how to fix it permanently. Website URL provided for further troubleshooting.
And if it’s possible to center the checkout buttons even better! 
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!
Hi @GabrielS thank you for your answer, how can I target only that image
Well, as I’ve stated above, I’d need to see the website.
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!
Thank you so much ! @GabrielS
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
