How to center productpage image into the grid - Dawn theme 7.0.1

[Dekanten]

Hello

I will sure thank you all for helping me out. 🙂

I have a issue with my images on product page, how can i center them into the grid?

If you look on this page, you will se the grid and the image is not in center.

My url:

https://dekanten.no/products/argos-adonis-awakens 

[Moeed]

Hey @Dekanten 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    margin-left: 50px;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dekanten]

Hello, i tried the code but the images on collection pages totally bugged out, any methood to fix this though? 🙂

Hope we can do something with it. 🙂

[PageFly-Richard]

Hi @Dekanten 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

I checked the code and found that your product images are actually centered but due to the design layout of the theme you observe that the elements are skewed, try increasing the font size of the Title to go up this can help, and you can also add this code to make your page look better
Online Store ->Theme ->Edit code
Assets ->Base.css

@media screen and (min-width: 990px) {
.header__inline-menu {
    display: flex !important;
    justify-content: center !important;
}
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

[Jahid-KlinKode · Accepted solution]

Hey @Dekanten, watch this YouTube video at https://www.youtube.com/watch?v=LNCzj6cxw1s for a solution on centering productpage image into the grid in the Shopify Dawn Theme.