images on product page are too big (yuva theme)

[ali219]

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

[Moeed · 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

[Dave_Winkler]

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.

[GTLOfficial]

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

[Dan-From-Ryviu]

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;
}
}