Blank Gaps in Product Layout
 

Hello all!
Looking to fix an issue with my product. I am in X-cart 4.6.4 and the skin is Fashion-Walk.

When I am looking at my website (the product is viewed in a grid format) there are blank spaces where product should condense and fill all the spaces. For example there are 3 products per row but sometimes there are 2 empty and 1 product on the right most box.

I cannot figure out why it does this. I have checked to see if it is because of no inventory by disabling product, but that is not the case. Any ideas?

Here is a link for an example: http://www.ameribag.com/HBBevo-style.html

Thank you!:-)

Re: Blank Gaps in Product Layout
 

Products containers are different heights. You have to either make them the same height or clear the float after each 3rd product

Re: Blank Gaps in Product Layout
 

Thank you for your response! However I am a bit confused.
How do you edit product containers? Shouldn't they be default since it is a template? Also I am not certain what 'clear the float' means. :/

Re: Blank Gaps in Product Layout
 

They are default - that's what makes them not to behave properly with your products. Every site is different. You need to adjust the css height of the product block so to fit all content inside without making one or another product block higher - this is what is throwing off the alignment.
All these products blocks are set to float to the left - by your reply I take it you have no idea what css is or how to adjust page elements styling.

In this case you are probably better off hiring someone to do this for you.

Re: Blank Gaps in Product Layout
 

Perhaps I misguided my question. Nothing about the information should cause each block to be different sizes. Every image is identical and every product is a duplicate of the previous one - so they shouldn't be off set. I understand exactly what you are saying, it just doesn't make sense that they are even different to misalign in the first place.

I am very aware of what Cascading Styling Sheets are and how to edit both CSS and HTML...but thank you for the assumption.

Logically I see why you are saying they would be spacing themselves in such a way but I was asking if it had to do with something in x-cart (numbering order, inventory, having product under several categories..etc), assuming it had nothing to do with how information sat within the product template 'block'.

Thanks anyway..

Re: Blank Gaps in Product Layout
 

They are not the same height. On this example page first 2 product containers have height of

height: 313.367px;

while the rest have height of

height: 294.367px;

This difference of the height causes the 4th product to go under the 3rd one since product containers float to the left. You may think all the info is the same but if you look at the source code you will see the different styling and the info is not the same - the first 2 products have their title to spread on 2 lines causing the container to have bigger height...

Re: Blank Gaps in Product Layout
 

AHah! Thank you, it is merely the title length issue! If the titles can stay at 1 line, this jumping wont happen! That make much more sense, and is much simpler to fix.

Much appreciated.

Re: Blank Gaps in Product Layout
 

SOLVED it - well, for our site

in

/fashion-walk/customer/main/products_t.tpl

Around line 108 - we took out the product rating stars - that was messing it up - users can still rate the products on the product page.

This also stops someone doing low ratings on everything on one page.

Hope this helps someone !!

Note - just added * in the {* *}

{if $product.rating_data}
{* include file="modules/Customer_Reviews/vote_bar.tpl" rating=$product.rating_data productid=$product.productid class=$vote_class *}
{/if}