I am using WooCommerce 2.X with Zurb Foundation 5.X. Here’s what my basic layout looks like on desktop:
…which is fine by me. Problem is, upon viewport resizing, the product images shrink, instead of collapsing under each other, resulting in a crammed, ugly layout like this:
This is the output of the “out of the box” code.
I’ve made no modifications to content-product.php or woocommerce.css. When I modify content-product.php to wrap each iteration of the loop in “large-3 columns” — which one would think would be the correct solution since we’re using Foundation — the output becomes:
It seems to me that the
/* Product loops */
.products ul, ul.products {
margin: 0 0 1em;
padding: 0;
list-style:none outside;
clear:both;
.clearfix();
li {
list-style:none outside;
}
}
ul.products {
li.product {
float:left;
margin: 0 3.8% 2.992em 0;
padding: 0;
position: relative;
width: 22.05%;
margin-left: 0;
a img {
width: 100%;
height:auto;
display:block;
margin: 0 0 8px;
.box_shadow(0,1px,2px,0,rgba(0,0,0,0.3));
.transition();
}
}
li.first {
clear:both;
}
li.last {
margin-right: 0;
}
}
No matter how I modify the image size percentages, I cannot increase their size. Ultimately, I want my mobile layout to look something like a nice, stacked, fluid layout, like so:
Seems so easy, yet here I am, 5 hours and no love later. Any help greatly appreciated!
