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
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!
you can see the main product and below I want only one row of submedia gallery.
thanks
@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%;
}
}
@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
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 product
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 product
@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
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?
@Olbap - may be you used width, change it to 20 in above code and check
No, i changed the width above the code and not, the percentages to 20-25% and not worked.
Im getting crazy with this issue
@Olbap - it should work, if not then try putting !important
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;
}
}
sorry, no idea about this.