How to center product image with thumbnails on both side carousel mode on mobile display Dawn Theme

[cococat]

Hi all,

I want my product page image to split into 3 grids with 10% 80% 10% grid ratio, with 80% is my display image and two other 10% are my thumbnails. Below is an example of end result

My product page image is currently looking like this.

And here is the code that i added to my base.css file.

@media screen and (max-width: 749px) {
.product__media-item {
margin: 0 !important;
width: calc(80% - var(--grid-mobile-horizontal-spacing) * 3 / 4) !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
}
}

Thank you in advance for your help! 

[topnewyork]

Hi @cococat 

Would you mind to share your store URL website, with password if its protected? Thanks!

[cococat]

Hi @topnewyork ,

my store url is: https://www.amandacharming.com.au/ 

pw is: cococat

Thank you!

[cococat]

Hi @topnewyork , just want to follow up to see if you have any update solution for this? Thank you!