How can I resize images for a better customer view?

[KMichael]

Hi,

The images I uploaded seem to be very large and don't fit on the screen. When viewing an item, customers must scroll down to see the complete image. I would like the images to be a smaller size but can't manually edit them all.

Any solutions?

[LitCommerce · Accepted solution]

Hi @KMichael,

Go to Assets > base.css and paste this at the bottom of the file:

.global-media-settings img {
    width: auto !important;
    margin: auto;
    right: 0;
}
.global-media-settings {
    padding-top: 100% !important;
}

Hope it helps!

[LitCommerce · Accepted solution]

Hi @KMichael,

Please add code:

.product-grid .card .media {
    background: #fff !important;
}
.product-grid .card__media .media img {
    height: 100% !important;
    width: auto !important;
    margin: auto;
    right: 0;
}

[LitCommerce · Accepted solution]

Hi @KMichael,

Please change code here:

Code:

.global-media-settings {
    padding-top: 50%!important;
}

[LitCommerce · Accepted solution]

Hi @KMichael,

Go to Assets > base.css and paste this at the bottom of the file:

.global-media-settings img {
    width: auto !important;
    margin: auto;
    right: 0;
}
.global-media-settings {
    padding-top: 100% !important;
}

Hope it helps!

[KMichael]

Thank you for your help.

I would also need help with coding to resize the image when shown by "you may also like"

It only shows a fraction of the image there because the image was originally too large.

Could you help me with that?

[LitCommerce · Accepted solution]

Hi @KMichael,

Please add code:

.product-grid .card .media {
    background: #fff !important;
}
.product-grid .card__media .media img {
    height: 100% !important;
    width: auto !important;
    margin: auto;
    right: 0;
}

[KMichael]

Thank you.

This has helped with images that were too long to be shown. But some images are too wide to be shown fully.  I am attaching an image of a loveseat. The image is chopped at the sides. What could be done to fix this?

[LitCommerce · Accepted solution]

Hi @KMichael,

Please change code here:

Code:

.global-media-settings {
    padding-top: 50%!important;
}

[KMichael]

it did help for most items, some items though still have the images not showing fully. 

How should I edit that code? 

[KMichael]

Hi,
The image sizes are still not ideal.
Could you please try to help me figure it out?
Still, some photos are too wide to display completely.
Maybe we should make all of the images taller so that more of the width is visible?

[LitCommerce]

Hi @KMichael,

Please add code:

.product-grid .card__inner {
        --ratio-percent: 50% !important;
}

[KMichael]

Hi,

It is still not working properly.

What else could be done to fit it to screen?

[LitCommerce]

Hi @KMichael,

I checked and it shows fine, this is the section you checked?

[KMichael]

Please check out this link.

https://yourfurn.com/collections/sofas

[LitCommerce · Accepted solution]

Hi @KMichael,

Please go to base.css file and remove code here:

it will display fine

[KMichael]

Much better. Many items show fully now. Is there any further solution for items like these?

https://yourfurn.com/collections/sectionals?page=4

[LitCommerce]

Hi @KMichael,

It will be really hard for everyone, if you want to, all images will be affected. Refer:

[itsleonforshort]

Hi LitComm! Does this apply to my own shopify too? How can I resize images freely and copy the size of the middle image from the Origin theme? Thank you..