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

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

cococat
Tourist
6 0 0

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

380554984_368334865764950_5268146679978191552_n.jpg

 

My product page image is currently looking like this.

mywebsite.jpg

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! 

Replies 3 (3)

topnewyork
Navigator
310 35 47

Hi @cococat 

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

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
cococat
Tourist
6 0 0

Hi @topnewyork ,

 

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

pw is: cococat

 

Thank you!

cococat
Tourist
6 0 0

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