CODEWITHSUNDEEP
htmlcsswordpresswoocommerce
TLR
TLR

Reputation: 59

Product Images too big

I was trying to finish my website, but at the end I saw that my single product images are way too big.

My settings were set to 600 px x 450px But when I visit the a product page, they're set to 1100 x 855 px.

I already tried to fix it with this CSS:

.single-product div.product div.images img {
    width:              80% !important; 
    margin:             auto;
}

and used the plugin to regenerate the thumbnails, but not the solution.

Does anyone have an idea to fix it?

Thanx in advance.

Upvotes: 0

Views: 1447

Answers (3)

Felicia Santos
Felicia Santos

Reputation: 421

Sometimes Regenerate Thumbnails plugin doesn't work. Try looking for "Force Regenerate Thumbnails" and see if that plugin gives you any luck.

Upvotes: 0

AlexG
AlexG

Reputation: 5919

Don't give the images a fixed width, give it the the container:

.single-product .product .images {
  width: 80%; 
  margin: auto;
}

img.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

Your images container will now have 80% of the parents width. Your images with the class .img-responsive Will use their own width unless the container is smaller. If the container is smaller than your images, they will simply scale down, keeping the proportions. (Same class as bootstrap uses).

Upvotes: 0

yogihosting
yogihosting

Reputation: 6292

In your WordPress go to "WooCommerce > Settings > Products > Display" there you can set the Product Images. See the attached image - enter image description here After setting the image size do image regeneration using plugin -'Regenerate Thumbnails'

Upvotes: 2

Related Questions