Image resizing on home page (product category) [closed]

by

I have been working on resizing the images on my wordpress website, the images are not appearing on equal sizes or not aligning properly. But inside the product pages it looks normal size but in the shop/home page (products page) all images are appearing in bigger size. how to fix the image size in wordpress i have not idea. Please refer my website (www-dot-carolinegoodwin-dot-com and suggest me what to do and how to fix this issue.

Thanks much in advance for your help.

2 Answers
2

The CSS of WooCommerce is stretching the images to 100% of their parent <div>, as seen here:

 ul.products li.product a img {
     -moz-transition: all 0.2s ease-in-out 0s;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
     display: block;
     height: auto;
     margin: 0 0 8px;
     **width: 100%;**
 }

You can simply remove or override that line using the !important declaration in another CSS file. Also, you can override it to width: auto and change the margin: 0 0 8px in that rule set to margin: 0 auto 8px auto to center those images in their div container.

Leave a Comment