Thumbnail Fitting

Site URL: http://www.mozerisfineantiques.com

Hello,

I have this code : 

.gallery-lightbox-item img {
    object-fit: contain !important;
 

Which is really useful and contains my images so the full object can be visible when images are enlarged.

I wanted to ask how can I change this code and apply it to thumbnails?

You can see they are not displayed fully

Image example : 

https://ibb.co/4775yY8

I used to have the same issue with enlarged images but above code fixed it, I want to do the same for thumbnails.

Website: www.MozerisFineAntiques.com

Thank you.

Can you check image again?

I was able to see the linked image.

On 2/22/2021 at 2:29 AM, tuanphan said:

Can you check image again?

Please try again it seems to work fine for me, I will attach it to this message.

Please any help appreciated.

Hi. Try adding to Design > Custom CSS

.tweak-products-image-aspect-ratio-32-standard .products.collection-content-wrapper .grid-image-wrapper img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}

On 3/2/2021 at 6:13 AM, tuanphan said:

Hi. Try adding to Design > Custom CSS

.tweak-products-image-aspect-ratio-32-standard .products.collection-content-wrapper .grid-image-wrapper img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}

 

Hi, thank you for the response.

This just slightly shifted the image downwards.

Is there anything simliar to the code below? Except lightbox, to have thumbnail, Ive tried change the wording but did not work the code.

.gallery-lightbox-item img {
    object-fit: contain !important;

On 3/8/2021 at 7:59 PM, Faustas said:

Hi, thank you for the response.

This just slightly shifted the image downwards.

Is there anything simliar to the code below? Except lightbox, to have thumbnail, Ive tried change the wording but did not work the code.

.gallery-lightbox-item img {
    object-fit: contain !important;

 

 

Hi. Have you solved this yet?

21 minutes ago, tuanphan said:

Hi. Have you solved this yet?

No I havent, please help me. Do you understand my enquiry correctly?

I need a code to make my thumbnails forced to fit and display fully.

They are being displayed like this:

Image link : https://ibb.co/W6t03p1

I had the same issue with light box enlarged images and managed to fix it with code I mentioned above, I am sure there is a code to do the same for thumbnails.

Thank you!

How do i make my thumbnails fully visible?

https://ibb.co/W6t03p1

On 3/19/2021 at 4:54 PM, Faustas said:

How do i make my thumbnails fully visible?

https://ibb.co/W6t03p1

Try adding to Design > custom CSS

.products.collection-content-wrapper .grid-item .grid-item-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.products.collection-content-wrapper .grid-image-wrapper {
    padding-bottom: 100% !important;
}

On 3/22/2021 at 7:50 AM, tuanphan said:

Try adding to Design > custom CSS

.products.collection-content-wrapper .grid-item .grid-item-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.products.collection-content-wrapper .grid-image-wrapper {
    padding-bottom: 100% !important;
}

 

Thank you so much Tuanphuan, this is the closest thing that anyone has provided to what I was looking for.

My thumbnails are now displaying the products fully, appreciate your help so much.