Product Page - Image cutting off

[kashco]

https://kashco-interiors.myshopify.com/products/chobi-dye-kilim-7-x-10-feet

https://kashco-interiors.myshopify.com/products/chobi-dye-kilim-2-5-x-12-feet

https://kashco-interiors.myshopify.com/products/chobi-ziegler

https://kashco-interiors.myshopify.com/products/chobi-dye-kilim-2-5-x-10-feet

I want to ensure that my large product images are fully visible i.e. increase the height of the image viewer and likewise it should fit in the thumbnail according to the image. 

Also, how can I make the product recommendation fit the complete window and make it large ? Appreciate your help. 

[Moeed · Accepted solution]

Hey @kashco 

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>
.product__media.media.media--transparent img {
    object-fit: contain !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[kashco]

Thanks. That worked. What about the collection grid image - how can we achieve the same effect please ?

https://kashco-interiors.myshopify.com/collections/bedroom-furniture

https://kashco-interiors.myshopify.com/collections/handwoven-rugs

[Moeed]

Hey @kashco 

Keep the previous code and add this new code above </style> in the end of theme.liquid file.

.card .media img {
    object-fit: contain !important;
    background: white !important;
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[kashco]

Is it possible to add like a border (line around the product cards in the grid view). Also my recommended product - how can I make it to big to fit the whole window ?

[Moeed]

Hey @kashco 

Again, keep the previous code and add this new code above </style> in the end of theme.liquid file.

.card--card .card__inner .card__media {
    border-radius: 0 !important;
    border: solid 1px black !important;
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed