Product Collections photo too large - Ride theme

Store Design
, ,
1

Hello everyone,

I need some assistance with making the images smaller. I tried re-sizing all the images, changing them, everything.

Please help asap!

2

Hello @ReaW ,

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

3

Hi,

Apologies, the store thequartedge.com pword: chaomo

1 Like
4

Hello @ReaW ,

To can reduce the image size, you can check out my suggestion below to make it:

  1. Go to Edit code on Online Store:

GemPages_0-1670378541567.png
GemPages_0-1670378541567.png399×194 24.3 KB

  1. Add my code to the end of the file Base.css:
@media screen and (min-width: 990px) {
	.collection ul li.grid__item {
		max-width: calc(15% - var(--grid-desktop-horizontal-spacing) / 2) !important;
	}
}

@media screen and (min-width: 750px) {
	.collection ul li.grid__item {
		max-width: calc(30% - var(--grid-desktop-horizontal-spacing) / 2) !important;
	}
}

*Note: you can replace the number 15 and 30 with another number you want to reduce the image size.

The image show like this when you add my code:

GemPages_1-1670378728530.png
GemPages_1-1670378728530.png1907×966 137 KB

I hope you find the answer helpful. If you need further support, do not hesitate to reach out to us.

Kind & Best regards,
GemPages Support Team.

2 Likes
5

@ReaW

thanks for details, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 990px) {
	.collection ul li.grid__item {
		max-width: calc(20% - var(--grid-desktop-horizontal-spacing) / 2) !important;
	}
}
6

Hi @ReaW ,

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

@media screen and (min-width: 990px) {
  .collection .product-grid .grid__item {
      width: calc(25% - var(--grid-desktop-horizontal-spacing) / 2) !important;
      max-width: calc(25% - var(--grid-desktop-horizontal-spacing) / 2) !important;
  }
}

Hope it helps!

7

Ahh It worked! Tysm! :blush: