Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
I would appreciate some help reducing the white space between the product picture and follow up pictures. Only for desktop version, for mobile version I managed to solve the problem.
store: soypasoaps.com
Thank you in advance!
Solved! Go to the solution
This is an accepted solution.
@Soypa please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media screen and (min-width: 749px){
.template-product #shopify-section-product-template .product-template__container .grid .grid__item .product-single__media-wrapper #ImageZoom-product-template-21293038403737{
height: 0% !important;
}
}
This is an accepted solution.
I saw your store its not working on all thumbnail
you need to put this code
@media (min-width: 749px){
.template-product #shopify-section-product-template .product-template__container .grid .grid__item .product-single__media-wrapper .product-single__media {
height: 50% !important;
}
}
This is an accepted solution.
I did Send a message you can reply,
& here the code
@media(min-width:1024px){
body .article__grid-image-container {
height: 0;
}
}
@media(min-width:1024px){
.product-single__media img{
height: 100% !important;
object-fit: cover;
max-height: 100% !important;
}
}
add this in your css or scss file
it's not 100% perfect solution but it will work
Thanks for the fast feedback, however it not working still. I've tried to play with the height percentage, but nothing changes. Any idea what is wrong? It is in debut theme.
This is an accepted solution.
@Soypa please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media screen and (min-width: 749px){
.template-product #shopify-section-product-template .product-template__container .grid .grid__item .product-single__media-wrapper #ImageZoom-product-template-21293038403737{
height: 0% !important;
}
}
Still no change 😕
I've already included a few other codes to adjust other white spaces. Not sure whether this interferes with anything. Here is the screenshot.
ok just open bracket please close bracket see screenshort http://prnt.sc/11mv3oo
Here is the live example
in the red circle my code
Thanks, it's working now!
This is an accepted solution.
I saw your store its not working on all thumbnail
you need to put this code
@media (min-width: 749px){
.template-product #shopify-section-product-template .product-template__container .grid .grid__item .product-single__media-wrapper .product-single__media {
height: 50% !important;
}
}
I was testing something out. It's working now. Thanks.
Can I ask for additional help with white space between blog post photos and text?
This is an accepted solution.
I did Send a message you can reply,
& here the code
@media(min-width:1024px){
body .article__grid-image-container {
height: 0;
}
}
User | RANK |
---|---|
114 | |
87 | |
69 | |
66 | |
46 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022