Title: Image Issue CSS related…
Last modified: August 22, 2016

---

# Image Issue CSS related…

 *  [zigvt85](https://wordpress.org/support/users/zigvt85/)
 * (@zigvt85)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/image-issue-css-related/)
 * I think this has to do with the CSS coding in wordpress or maybe woocommerce.
   Here is the code I use for my images/products for woocommerce.
 * CSS Product Image Code
 *     ```
       .price del {
         opacity: 0.5;
         filter: alpha(opacity=@opacity * 100);
       }
       .price ins {
         text-decoration: none;
         font-weight: bold;
         margin-left: .618em;
         color: #b85f56;
       }
       ul.products {
         margin-left: 0 !important;
         list-style: none;
       }
       ul.products:after {
         content: "020";
         display: block;
         height: 0;
         overflow: hidden;
         clear: both;
       }
       ul.products li.product {
         position: relative;
         float: left;
         width: 48%;
         margin-right: 3.8%;
         margin-bottom: 1.618em;
         text-align: center;
       }
       ul.products li.product h3 {
         margin-bottom: 0;
       }
       ul.products li.product a:hover h3 {
         color: #ff4800;
       }
       ul.products li.product .price {
         display: block;
         color: #9f9693;
         margin-bottom: 1em;
       }
       ul.products li.product img {
         width: 100%;
         height: auto;
         padding: .53em;
         display: block;
         -webkit-box-sizing: border-box;
         /* Safari/Chrome, other WebKit */
         -moz-box-sizing: border-box;
         /* Firefox, other Gecko */
         box-sizing: border-box;
         /* Opera/IE 8+ */
         border: 1px solid #e8e4e3;
         background: #fff;
         margin: 0 auto 1em;
       }
       ul.products li.product:nth-child(2n) {
         margin-right: 0;
       }
       ul.products .star-rating {
         margin: .5em auto;
       }
       .pagination-wrap {
         margin-bottom: 1.618em;
         padding-top: 1.618em;
         border-top: 4px double #e8e4e3;
       }
       .pagination-wrap:after {
         content: "020";
         display: block;
         height: 0;
         overflow: hidden;
         clear: both;
       }
       .pagination-wrap .pagination,
       .pagination-wrap .woocommerce_ordering,
       .pagination-wrap .woocommerce-ordering {
         width: 48%;
       }
       .pagination-wrap .pagination {
         float: left;
         margin: 0;
         text-align: left;
         padding: 0;
       }
       .pagination-wrap .woocommerce_ordering,
       .pagination-wrap .woocommerce-ordering {
         float: right;
         text-align: right;
         padding-top: .53em;
       }
       .woocommerce_result_count,
       .woocommerce_ordering,
       .woocommerce-result-count,
       .woocommerce-ordering {
         width: 48%;
         float: left;
       }
       .woocommerce_result_count + ul.products,
       .woocommerce_ordering + ul.products,
       .woocommerce-result-count + ul.products,
       .woocommerce-ordering + ul.products {
         clear: both;
       }
       .woocommerce_ordering,
       .woocommerce-ordering {
         text-align: right;
         float: right;
       }
       ```
   
 * WordPress Image CSS Image Code
 *     ```
       .image-gallery-item img {
         max-width: 100%;
         padding: .236em;
         margin: 0 1em 1em 0;
         border: 1px solid #dedede;
         background: #f7f7f7;
         -webkit-border-radius: 0.236em;
         border-radius: 0.236em;
         -moz-background-clip: padding;
         -webkit-background-clip: padding-box;
         background-clip: padding-box;
       }
       .image-gallery-item img:hover {
         border: 1px solid #c4c4c4;
         box-shadow: 0 1px 0.327em 0px rgba(0, 0, 0, 0.2);
         -webkit-box-shadow: 0 1px 0.327em 0px rgba(0, 0, 0, 0.2);
       }
       ```
   
 * Here are some links to the images to give you a better visual what I am trying
   to explain. The first image you see the box is normal the way I want it. But 
   as soon as you resize the browser to small they grow big I do not want that to
   happen how can I fix this?
 * [Image URL 1](http://www.soslidesigns.com/images/juggaloshitimgtesthelp1.jpg)
 * [Image URL 2](http://www.soslidesigns.com/images/juggaloshitimgtesthelp2.jpg)
 * I have had this issue for awhile now just been trying to fix it myself but I 
   am obviously stumped. Hoping someone from the community may help me or maybe 
   a developer from woocommerce.
 * [https://wordpress.org/plugins/woocommerce/](https://wordpress.org/plugins/woocommerce/)

The topic ‘Image Issue CSS related…’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [zigvt85](https://wordpress.org/support/users/zigvt85/)
 * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/image-issue-css-related/)
 * Status: not resolved