main shop page not resizing product images to be smaller

The catalog image size setting controls the size of the images sent from the server. Regenerate thumbnails if you change this setting.

Some moments later, the images will arrive at the browser, and the browser will resize the images to fit the space available as controlled by the page’s stylesheet.

The space available can be changed by custom css. For advice on suitable css, please post the url to your shop page.

is there a way I can send you the page privately?

I sent you an email. I hope that helps.

Try this custom css:

.woocommerce ul.products li.product a img {
  width: 75px;
  height:75px
}

Custom css can be entered at:
Dashboard > Appearance > Customise > Additional CSS

Consider setting the catalog image size to 270px square and regenerating, you should get clearer images.

Yes! almost worked.
Well, it did work.
But now my titles need to be adjusted to fit the image sizes.

I’m creating a monster!

It’s odd. I do get great quality, clear images when using Firefox, but Chrome is blurry.

Try setting 6 products per row:
https://docs.woocommerce.com/document/change-number-of-products-per-row/

Then some experimentation may be needed:

.woocommerce ul.products li.product a img {
  width: 145px;
  height:145px
}
.woocommerce ul.products li.product h3 {
  width:145px;
  height:66px;
  letter-spacing:0;
  text-transform:none;
  line-height:22px
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  width: 12%;
}

@lorro (SOLVED)

Thank you so much for your help!
I really appreciate it.
If I could re-pay you down the road in some fashion, keep in touch!

—————
—————

For anyone here with the same problem.
Here is my final custom css with defining tags…

.woocommerce ul.products li.product a img {
  width: 145px; /***this adjusts the product thumbnail size***/
  height:145px
}
.woocommerce ul.products li.product h3 {
  width:145px; /***this adjusts the product title width - should match thumbnail width***/
  height:56px; /***this moves the price up and down***/
  letter-spacing:0; /***this adjusts the spacing between letters in the product title***/
  text-transform:none; 
  line-height:18px /***this adjusts the spacing between each line in the product title***/
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  width: 12%; /***this adjusts the overall width of the on-screen display???***/
}

Thanks for your custom code i am having same issue right now but your solution is not working for me , is there any other way you can achieve this any assistance will be grateful

@lorro OR @spanky22