Shopify themes, liquid, logos, and UX
the images on the product page doesn't fit properly, its too large for the page and about a quarter of it is below the screen when you open a product page. how can i get the full image to fit on the screen as soon as you open a product.
store url https://7e7d4a-12.myshopify.com/
password: Qwerty123
Solved! Go to the solution
This is an accepted solution.
Hey @ali219
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (min-width: 768px) {
.col-12.col-sm-12.col-md-6.col-lg-8.yv-product-slider-wrapper {
max-width: 40% !important;
}
.sticky-item {
width: 140% !important;
}
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This is an accepted solution.
Hey @ali219
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (min-width: 768px) {
.col-12.col-sm-12.col-md-6.col-lg-8.yv-product-slider-wrapper {
max-width: 40% !important;
}
.sticky-item {
width: 140% !important;
}
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
I'm assuming this is to make the large image in the product description not so massive? That is the issue I am having, it is also cutting off the thumbnails. I have tried your code, and all the other codes that were supplied to fix this issue and none of those worked either. Am I missing something here? I would like to make these images a bit smaller.
HEllo @ali219
Go to online store ---------> themes --------------> actions ------> edit code------->theme.min.css
.col-12.col-sm-12.col-md-6.col-lg-8.yv-product-slider-wrapper {
max-width: 41%;
}
.product-detail-slider .flickity-button.previous, .product-section .flickity-button.previous, {
top: 24rem !important;
}
.product-detail-slider .flickity-button.next, .product-section .flickity-button.next, {
top: 24rem !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hi @ali219
Please open Online Store > Themes > Customize > Products > open product template assigned products, check if it has option to change width of media. If it does not have, please add this code to Custom CSS in Theme settings
@media (min-width: 992px) {
.main-product-slider-wrapper .yv-product-slider-wrapper {
max-width: 50% !important;
}
}
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024