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
Trailblazer
253 26 35

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!