Product submedia gallery in only one row - narrative

Olbap
Tourist
19 0 2

Hello good day.

 

Im using the narrative theme, and in the product page, the product submedia gallery its positioned in two rows. 

I tried lot of codes to put the images of the product submedia gallery in one row but not worked.

Please how can I make only one row of images? with two rows is a big section under the main photo product...

 

thank you for your time

Replies 13 (13)
oscprofessional
Shopify Partner
9198 1562 1928

Hello @Olbap ,
Welcome to the Shopify community!
Please Share your store live url with password (if it password protected) & screenshot where you want to do modification, so that I will solve your issue here!

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Olbap
Tourist
19 0 2

@oscprofessional 

 

you can see the main product and below I want only one row of submedia gallery.

thanks

Sin título.png

 

suyash1
Shopify Partner
3713 408 610

@Olbap - it can be done like screenshot, only thing is if you add 4th image, it will come to second row... this is not automatic adjustment we need manual code change.
you can add given css to the end of theme.scss file, this will change on all product pages

@media screen and (max-width:749px){
.product__submedia-list-item {
    -webkit-flex: 1 1 33%;
    -moz-flex: 1 1 33%;
    -ms-flex: 1 1 33%;
    flex: 1 1 33%;
}
}

 

suyash1_0-1631884035364.png

 

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
oscprofessional
Shopify Partner
9198 1562 1928
@media only screen and(max-width:749px){
.product__submedia-list-item {
    -webkit-flex: 1 1 33%;
    -moz-flex: 1 1 33%;
    -ms-flex: 1 1 33%;
    flex: 1 1 33%;
}
}


Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Olbap
Tourist
19 0 2

@suyash1 

Hello. In some products I  have 3 images in the submedia gallery and its ok in 1 row, but if I add a 4th or 5th image appear another row. Can i put all the images (3, 4, 5...) in only one row?

I tried that code, not works sorry.

You can see the two rows of images in this productSin título.png

 

Olbap
Tourist
19 0 2

@oscprofessional 

Hello. In some products I  have 3 images in the submedia gallery and its ok in 1 row, but if I add a 4th or 5th image appear another row. Can i put all the images (3, 4, 5...) in only one row?

I tried that code, not works sorry.

You can see the two rows of images in this productSin título.png

 

suyash1
Shopify Partner
3713 408 610

@Olbap - it is possible to put 5 images by adjusting width, but css do not know if your product has 3 image or 5 image, so if you make change to that number 33 to make it 25%, you will get 4 images in a row, if you do 20% then 5 images in a row but it will affect the products with 2-3 images too by making them smaller

 

therefore automatic adjusting everything is not possible

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
Olbap
Tourist
19 0 2

@suyash1 

 

Yes I tried to put 25% and 20%, and in old tries i did, but not worked, still the same number of images per row and two rows... why this not worked?

suyash1
Shopify Partner
3713 408 610

@Olbap - may be you used width, change it to 20 in above code and check

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30