Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Thumbnail Fitting


Faustas

Question

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.

 

 

Edited by Faustas
Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

11 answers to this question

Recommended Posts

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

Can you check image again?

image.thumb.png.e871af547076e1a848c3b45448e72f19.png

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

 

 

desktop.png

Link to post
  • 0

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

 

Link to post
  • 0
Posted (edited)
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;

 

 

Edited by Faustas
Link to post
  • 0
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?

Link to post
  • 0
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!

 

Link to post
  • 0
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;
}

 

Link to post
  • 0
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.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...