How can I resize large product images in Ride theme?

[ImStillLearning]

Hello all.

So I am at my wits end. On the actual page of a product the image (the main tile i have variant’s) the picture is way too big.

I have tried to resize the images through the file manger, and the product page.

I have even changed the page width to the minimum.

Any help will be greatly appreciated Please.

Thanks

[GemPages]

Hello @ImStillLearning

It’s GemPages support team and glad to support you today.

You can follow these steps:

1. Go to Online Store → Theme → Edit code

2. Open your base.css file and paste the following code below:

@media screen and (min-width: 990px){
 .product--large:not(.product--no-media) .product__media-wrapper {
    max-width: 50%;
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
 }
 .product--large:not(.product--no-media) .product__info-wrapper {
    max-width: 50%;
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
 }
}

Let us know how it works for you.
Best regards,
GemPages Support Team

[ImStillLearning]

Hello

Thank you for your quick reply. But it hasnt worked

[GemPages]

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[Cedcommerce]

Hello @ImStillLearning ,

To resolve this issue, you can paste the below code into your base.css file.

@media screen and (min-width: 900px){

.product:not(.product–columns) .product__media-list .product__media-item:first-child, .product:not(.product–columns) .product__media-list .product__media-item–full {

width: 97%!important;

max-width: 75%!important;

}

slider-component{

left: 75px!important;

}

}

Before:-

image.png

After:-

image.png

Let us know if you need any further help with this.

Regards,

CedCommerce

[ImStillLearning]

Thank you.