Empty Space in Grid View

Jul. 12, 2008 Categories: Ecommerce by shayne 17 Comments

So, if you have installed WP Ecommerce and also purchased the Gold Cart and are using Grid View, you may have experienced this issue. Not all rows of your products line up correctly. There is usually a large space on one row, where it might only show one item where normally it should show 3 or 4. It might look something like the screenshot below.

So there you see the “space” that cannot be filled, no matter what you try to do.

Well, in reality, the reason for this is a blank “more info” area that’s put in by Grid View. There is no information there, but the “More Info” area still takes up space, and by doing so it pushes the space that the item takes up down. This is what causes the next row not to line up correctly.

Below you will see a screenshot diagraming this. The red box is the “More Info” area and as you can see, the green line brought straight across from it does not line up with the next row of images. That’s why you get the blank space. Where the “More Info” box is located is based on how long your product description is, but in most cases, you will see this error.

So, how do we solve this problem? It’s actually pretty simple, once you see how it’s done. You will navigate on your server to “wp-content/plugins/wp-shopping-cart/gold_cart_files/grid_view.css” (UPDATE: If you’re using WP Ecommerce 3.7+ the file is located in ‘wp-contents/uploads/wspc/upgrades/gold_cart_files/grid_view.css’) and you will see the following style:

div.product_grid_display div.product_grid_item{
margin-bottom: 20px;
width: 120px;
float: left;
position: relative;
margin: 4px 8px 8px 0px;
min-height:180px;
height:auto !important;
height:180px;
}

In that style, you will remove this line: “height: auto !important;”

Once you do that, you should see your page working correctly. One more thing to remember is, the product description will push the “More Info” box down further if the product description is long. If that is the case, and this issue happens again, you can then modify the “height: 180px;” area to a larger number to solve this issue again.

I hope that helps anyone having this issue…and until next time…