Jump to content

Thumbnail Fitting

Recommended Posts

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.

 

 

Link to comment
  • Replies 11
  • Created
  • Last Reply

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;

 

 

Link to comment
  • 2 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.