Image gallery on Product page - Narrative Theme

poutacreative
Excursionist
18 0 7

I'm using Narrative Theme and I have submedia gallery on the bottom of the product page. How could I change the image amount in rows? Now there's three images in one row. I would also like to reduce the image size after adding more images to one row.

Can someone help?

URL https://www.mandamovementwear.com/products/basic-booty?variant=37972025966790
Password: manda

0 Likes
Bluish
Shopify Partner
555 78 88

Hi @poutacreative 

Add the below to your theme.scss file in your asset folder. That will make it 4 in a line, if you want 5, then put 20%. i.e. 100%/5. 6 same thing 100%/6 etc

Also know, you need to have the exact amount in that row, so if you want 4 in a row, make sure you have 8 pictures

 

@media only screen and (min-width: 750px) {
 .product__submedia-list-item {
    -webkit-flex:1 1 25%;
    -moz-flex:1 1 25%;
    -ms-flex:1 1 25%;
    flex:1 1 25%;
  }
}

 

 

If my answer was helpful please Like and Accept my post as the Solution
0 Likes
poutacreative
Excursionist
18 0 7

Thanks, that works! 

What if some products don't have the perfect amount of images? Is there a code that could e.g. force those last two images to be same size still and aligned to center or left? See the image below.

Näyttökuva 2021-1-25 kello 10.21.22.png

0 Likes
Bluish
Shopify Partner
555 78 88

Hi @poutacreative 

Delete previous and put this,

 

.product__submedia-list.product__submedia-list--r1 { 
  display: grid !important; 
  grid-template-columns: 25% 25% 25% 25%; 
}
@media only screen and (max-width: 479px) { 
  .product__submedia-list.product__submedia-list--r1 {
    grid-template-columns: 50% 50%; 
  }
 }
If my answer was helpful please Like and Accept my post as the Solution
poutacreative
Excursionist
18 0 7

Oh yes! Thank you so so much for this!

Is it very complex to move that gallery up below the main product image?

0 Likes
Bluish
Shopify Partner
555 78 88

Hi @poutacreative 

You'd need to move that section above the {{product.description}}

If my answer was helpful please Like and Accept my post as the Solution
poutacreative
Excursionist
18 0 7

I noticed that in one product page it doesn't align 4 images on a row. Even though that product has 8 images. Any idea why?

https://www.mandamovementwear.com/collections/tuotteet/products/spandex-booty
Näyttökuva 2021-1-25 kello 13.59.30.png

This one works just fine: https://www.mandamovementwear.com/collections/tuotteet/products/hipster-booty

Näyttökuva 2021-1-25 kello 14.00.04.png

0 Likes
Bluish
Shopify Partner
555 78 88

Hi @poutacreative 

looks fine to me.

If my answer was helpful please Like and Accept my post as the Solution
poutacreative
Excursionist
18 0 7

Well it looks okay now because I deleted few images. But I think that if I add those images back, same problem appears.

0 Likes