Solved

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

Dekanten
Pathfinder
143 1 49

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 

Accepted Solution (1)

Jahid-KlinKode
Excursionist
145 1 4

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

View solution in original post

Replies 4 (4)

Moeed
Shopify Partner
3672 928 1159

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:

Moeed_0-1693072544209.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Dekanten
Pathfinder
143 1 49

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
Shopify Partner
4206 951 1599

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Jahid-KlinKode
Excursionist
145 1 4

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