Hi everyone! Thank you in advance for any help. I am trying to move my additional product photos to the right of the main image in desktop view. I have Dawn Theme. If you have any suggestions I would really appreciate it.
1 Like
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
media-gallery.product__column-sticky {
display: grid;
grid-template-columns: 2fr .5fr;
}
.product--large .thumbnail-list {
grid-template-columns: 1fr;
}
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
HI! Thank you so much for helping!
I added the code you sent tobase.css (that’s the only one I could find). When I saved it, it didn’t change.
Your missing some curly bracket on the base.css.
Check this, image where you add 2 curly bracket.
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Okay I think I put the brackets in correctly please see code below:
}@media screen and (max-width: 728px){
#shopify-section-lh-section-hiojz9j1cgk .lh-title{
font-size: 20px !important;
}
}
#shopify-section-1623487814a2da2155 h1{
font-size: 20px !important;
}
}
}
@media screen and (max-width: 749px) {
.header__heading-logo {
max-width: 60px !important;
}
.collection-hero__title {
text-align: center;
}
}
media-gallery.product__column-sticky {
display: grid;
grid-template-columns: 2fr .5fr;
}}
}
.product–large .thumbnail-list {
grid-template-columns: 1fr;
}
How do I adjust the size of the images? they are very small
Please take the code that I provided from the base.css file and paste it into another file.
Find the file named section-main-product.css in the same Asset folder. Paste the code after the very last } (curly bracket). There is no need to add any additional code. Just copy and paste the existing code, and then save the file.
Thank you! Is there a way for me to adjust the size of the images on the side?
I would like it close to this.
If you like smaller replace the given code on this code.
media-gallery.product__column-sticky {
display: grid;
grid-template-columns: 2fr .5fr;
}
.product--large .thumbnail-list {
grid-template-columns: .6fr;
}
Or Just adjust this one.
The 1 change into .6 or how small you want, please be sure not to add any thing else. just dots and number.
then Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
You are amazing! Thank you so much!