eStore fancy 3 thumbnails not displaying properly

[SilvurCat]

Hello!

I am using the latest version of eStore with the extra shortcodes plugin. When I do a category display using the fancy 3 display (I have 36 products in this particular category) my first page of display results comes out perfectly aligned in a 4 x 5 grid. My second page, however, displays rather odd. I get one row of 4, one row of one (in the very last column), another row of four, another row of one, and then one row of two, which are aligned to the far right.

I have the image zoom plugin installed, but I deactivated it and still have the same display results. I have not modified the plugin in any way.

My website is currently in maintenance mode, as my client doesn’t wish to have her content displayed on the internet just yet. I can provide the URL and login info if you make contact. Thank you for your prompt response. We are planning on making this site live tomorrow.

[admin]

The fancy 3 grid display works better if your product names are of similar length. For example: if you have one product that is 30 characters long and another one that is 60 characters (making the product name wrap to 2nd line) then when you place them side by side the 2nd one won’t be the same height as the first one. This will affect the next row as it won’t be able to stack properly. Adjust the product name slightly (make the longer ones a little short) so that they all take the same height to display and you won’t see this issue.

Alternatively, Grab this custom css plugin:

http://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

Then add the following CSS to give a fixed height to the fancy3 displays which will fix that issue:

.eStore-fancy3{

height: 250px;

}

[SilvurCat]

Thank you for the information! Here’s how I solved the issue without having to get creative on my product’s descriptions: I simply targeted the description in the css for the footer element, and set a standard height to the element so my descriptions can either be one or two lines. (I also used some margins to pull the description away from the thumbnail) Here’s my CSS:

.eStore-fancy3-footer{margin: 10px 0px; height: 40px !important;}

I hope this information can be beneficial to someone else.

Thank you for the wonderful plugin!

[spbmrmusic]

Oh, MARVELOUS! Thank you SilvurCat. That code is most beneficial!

[Author]

Posts