Product Layout out of order because of wrapping pr

In just about every page in my test Hika shop the product grid is uneven because in some products the product name only needs one line while in other product the name takes 2 lines. This in turn makes the product box taller and it messes up the floats for the container divs on the product page.

In CSS I can fix this easily by either giving the title area a set height or giving the entire box a taller height, but before I go ahead and do that, it seems to me that something like this should have been considered in the design.

I see when I create a menu or a view in Hika shop that there is a section where I can set the thumbnail height and width as well as the <div> height. However, while the thumbnail works rather well, the div height simply does not work.

Here is an example of what I mean: seogarden.com/pear/index.php?option=com_...t=listing&Itemid=135
If you go to the page above and scroll you'll see some rows of products having 3 products (as I set them) and others having only 1. In all cases it's due to the title being too long.

Also, I realize that in my example that is a module that has this problem but elsewhere I found it for regular category views as well.

Thank you for your help.

Hi,

The option "pane height" is for the views "listing_fade", "listing_img_pane", "listing_slider_horizontal", "listing_slider_vertical" and "carousel".
You have to set a min height in CSS for your case.

Thank you. I found an existing min-height already, but it is set at 30px or so. I wanted to make sure I wasn't overriding some existing setting. I'll go ahead and set it there. Thank you very much.

We are having the same issue as stated above:

"In just about every page in my test Hika shop the product grid is uneven because in some products the product name only needs one line while in other product the name takes 2 lines. This in turn makes the product box taller and it messes up the floats for the container divs on the product page."

Unfortunately I am not a coder, could you be more specific on how to fix the issue. I have attached a link to one of my product pages with the issue. thanks vaporandco.com/categorylistings/category/20-tips-and-cartridges

Hi,

In your listing, some products have their name in one line, some in two lines.
This little difference change the global height of the blocks. So you have two solutions:
- Set the same height for all products names in the boxes.
- Set the same height for all boxes.

These two solution require to add a CSS rule (in your template CSS or by creating a CSS custom file in HikaShop).

Solution 1 Solution 2
Regards,

Perfect....worked just like you said. Thanks.

hi again. I had to change the back end general display to use bootstrap design in order to accommodate the way the products show up on tablets - portrait view (the were not wrapping correctly). Once i did this it corrected that issue however now on my main view the code that i put in to wrap the text is not working correctly. I have two attachments, one the way it looks without bootstrap enabled and then one with. The code i am using that did work is:

.hikashop_products_listing .hikashop_subcontainer {
min-height: 320px;
}

I don't see that problem on your page vaporandco.com/categorylistings/category/20-tips-and-cartridges
Are you talking about another website ? Can you give a link to the page of your screenshot ?

www.rustlingpalmsstudio.com/pen-sizes/midsize-pens , go to page 2. Thanks.

Hi,

It seems that you are using the list display type, thanks to try with the div one in the menu/module parameters.

You template is overriding our css properties, we set a width in percentage for this kind of listings, but on your page, it's missing.