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
15830 2369 3072

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!

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
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
9077 1129 1479

@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

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
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

 

oscprofessional
Shopify Partner
15830 2369 3072
@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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
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
9077 1129 1479

@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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
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
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Olbap
Tourist
19 0 2

@suyash1 

 

No, i changed the width above the code and not, the percentages to 20-25% and not worked.

Im getting crazy with this issue

suyash1
Shopify Partner
9077 1129 1479

@Olbap - it should work, if not then try putting !important

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Olbap
Tourist
19 0 2

 

hello @suyash1 

No, not worked. I added before some codes to solve some issues, but i suppose it isnt a problem for the actual code that not works...

Any idea about what could be?

Thank you

 

 

@media only screen and (min-width: 750px) {
.product-recommendations__slide {
-webkit-flex: 0 0 calc(25% - 2rem);
-moz-flex: 0 0 calc(25% - 2rem);
-ms-flex: 0 0 calc(25% - 2rem);
flex: 0 0 calc(25% - 2rem);
margin: 0rem;
}
}

.product__submedia-list {max-width: 512px; margin: 0px auto;}


.spr-summary-actions-newreview {
color: black !important;
}


@media only screen and (max-width: 767px) {
.collection-template .card.critical-clear{width:50% !important;float:left;}
.collection-template .card.critical-clear:nth-child(2n+1) {clear: both;}
}

@media only screen and (max-width: 749px) {
.list-collections-template .grid__item {
float: left;
padding-left: 0px !important;
width: 100%;
}
.list-collections-template .card {
width: 50% !important ;
opacity: 100;
transition: all .5s ease-out;
-ms-transform: translateY(50px);
-webkit-transform: translateY(50px);
transform: translateY(50px);
display: inline-flex !important;
padding-left: 16px !important;
}
}

suyash1
Shopify Partner
9077 1129 1479
sorry, no idea about this.
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI