Re: Product images too large Ride theme

Solved

How can I resize large product images in Ride theme?

ImStillLearning
Excursionist
46 0 6

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

 

 

Accepted Solution (1)

Cedcommerce
Shopify Expert
718 76 113

This is an accepted solution.

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:-

Cedcommerce_0-1675429951318.png

 

image.png

 

After:-

Cedcommerce_1-1675429951646.png

 

image.png

 

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

 

Regards, 

CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

View solution in original post

Replies 5 (5)

GemPages
Shopify Partner
5624 1261 1230

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ImStillLearning
Excursionist
46 0 6

Hello

Thank you for your quick reply. But it hasnt worked 😞

GemPages
Shopify Partner
5624 1261 1230

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

Cedcommerce
Shopify Expert
718 76 113

This is an accepted solution.

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:-

Cedcommerce_0-1675429951318.png

 

image.png

 

After:-

Cedcommerce_1-1675429951646.png

 

image.png

 

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

 

Regards, 

CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
ImStillLearning
Excursionist
46 0 6

Thank you.