[solved] Problem with Alignment of Featured Products on Home Page

[ken_morrow]

Have tried applying multiple products as featured on the home page using a supplied template. Several of the products are not aligning properly in that one entry is forming its own row with four others on another row with a space left over. Hard to explain exactly. Have 20 total products targeted wtih a desire to get them to line up in a grid of 5 columns and 4 rows.

 

Any suggestions on how to rectify this issue without going into code?

[The UI GIrl]

I have the same problem. The Home Featured product Module was working fine till about now.

In Chrome, the products are aligned properly without leaving unnecessary gaps between each other.

 

But in firefox and IE (probably all the versions), except the first row, there is a gap in all the rows. And when I inspect the element and check at the coded files, there is no problem that might point to this issue.

 

My question is if it's working fine in chrome, then why not in Firefox and IE??

 

Any help to solve this issue?

[vekia]

well i think that this is simple css isssue, without na URL to your store it's hard to say where the problem is exactly.

So if it is possible - please paste the url to your page here

[The UI GIrl]

Hi Vekia,

 

 

 

And I guess you are right, I did some simple modifications in the css of the original theme in order to change the colors of the buttons and the background. But I must have left a glitch due to which it has affected the alignment. Because when I run the same theme in its original theme, there is no alignment issue. I'm yet to spot out the root cause for this.

Any help would me greatly appreciated.

 

~The UI Girl

Edited May 28, 2013 by The UI GIrl (see edit history)

[vekia]

checked in latest IE:

i dont see any gaps

[The UI GIrl]

But this is how I'm getting in my firefox and IE(version 8).. The same is happening in one of my friend's Laptop..

 

Could you please clear your cache and check again. I've done the same in my browsers many times but no use!!

[vekia]

sorry to bother you, but i can't find the url to your website :/

[The UI GIrl]

Sorry I edited the link out from my previous message.

Here I have changed the theme back to its default theme but still the alignment problem persists in both Firefox and IE when viewed through my browsers.

 

Do let me know if it's the same problem when you check it out.

Edited May 29, 2013 by The UI GIrl (see edit history)

[The UI GIrl]

ISSUE SOLVED:

The problem of non-alignment occurred every time one of the products was given a special discount price. This means next to the price of each product, the old price would be displayed. This was taking a little bit of extra space causing the height of the product block to be uneven.

So goto-> theme->css->bio.css-> LINE 727:

add min-height

#product_list li {

 

border: 1px solid #ffffff;

 

-moz-border-radius: 4px;

 

-webkit-border-radius: 4px;

 

border-radius: 4px;

 

-webkit-transition: all 1s ease-in-out;

 

-moz-transition: all 1s ease-in-out;

 

-o-transition: all 1s ease-in-out;

 

transition: all 1s ease-in-out;

 

min-height: 250px;

}

 

This would elongate all the products block height by a few pixels and hence the alignment issue gets resolved.

I have attached before and after images below

[vekia]

thanks for the information! and for the solution

I really appreciate it

 

now i can mark this thread as solved

 

regards

[tamilansuresh]

 Hi,

 

I-have-issues-with-my-website

 

i-created-myself-not-a-developer-just-learned-it-online-on-how-to-create-a-website

 

Issues-with-the-featured-product-content-not-properly-alligned

 

www.wildcichlidz.com

 

Please-check-and-help-me.

 

Regards,

Suresh.