Line up products

How can i line up products ?

So that every product and price are horizontally align the images and prices.

http://zwembaden-zwembad-materialen.nl/index.php?main_page=index&cPath=9_10

Attachment #15437

Standardize your image heights

I can't guarantee that there won't be unexpected side effects

From line#192 of "includes/templates/responsive_sheffield_blue/css/stylesheet.css"

.product_title {
  font-size: 110%;
  font-weight: bold;
  width: 90%;
  height: 30px;
}

Add the line highlighted with blue text.

Cheers
RodG

kobra:

Standardize your image heights

That's what I thought at first, but they are standardised. The problem is caused by the varying lengths of the title text. :-)

Cheers
RodG

There are other potential "pushers" of the formatting as well, but if not used then won't be a problem: longer title text, attributes, specials, etc...

I usually use like min-height to allow expansion. I would rather the content be present than worry about the look if for some reason the reduced size makes content disappear.

mc12345678:

I usually use like min-height to allow expansion

min-height isn't a viable solution to what the OP is trying to achieve here (perfect/stable alignment), unless s/he knows in advance the minimum height needed to cater for all of the 'potential pushers'.

Furthermore, a look at the code/site indicates that in this case the only variable involved is the product_title, and this (by default) is limited to 64 characters, IOW, the minimum amount of space needed to cater for the 'push' can be determined, BUT, if/when the title reaches this maximum of 64 characters, the min-height needed to keep everything aligned (based on the currently defined font size) is 40px, which means most titles (those that don't come close to the 64 character limit) will have at least 10px more whitespace than is needed to keep everything else aligned.

The fixed height of 30px that I provided allows everything to be perfectly aligned without this additional space and without making anything disappear when the maximum allowed is reached.

Yes, I did experiment with both the height and the min-height settings before providing my prefered solution for this specific problem/situation/scenario. :-)

Cheers
RodG

RodG:

min-height isn't a viable solution to what the OP is trying to achieve here (perfect/stable alignment), unless s/he knows in advance the minimum height needed to cater for all of the 'potential pushers'.

Furthermore, a look at the code/site indicates that in this case the only variable involved is the product_title, and this (by default) is limited to 64 characters, IOW, the minimum amount of space needed to cater for the 'push' can be determined, BUT, if/when the title reaches this maximum of 64 characters, the min-height needed to keep everything aligned (based on the currently defined font size) is 40px, which means most titles (those that don't come close to the 64 character limit) will have at least 10px more whitespace than is needed to keep everything else aligned.

The fixed height of 30px that I provided allows everything to be perfectly aligned without this additional space and without making anything disappear when the maximum allowed is reached.

Yes, I did experiment with both the height and the min-height settings before providing my prefered solution for this specific problem/situation/scenario. :-)

Cheers
RodG

I do believe (pretty much expect) that the size suggestion came from "testing" and that the comment wasn't directed to me but to show the depth of care you normally take to provide a viable solution. The min-height of 30px would still serve the same purpose/effect generally speaking and yes could result in a "push" of one or more products if the full character (default) length were used. Guess I go for more of the ahh, so on occasion the perfect lineup may get affected, but at all times the customer sees all of the information "pertinent" to the product perspective. If that is not considered satisfactory to the store owner then explain the reasons (much like done above) and if look is the only factor of the owners desire, then so be it, fix the size to what has been requested, with explanation as to why I disagree with it... It's a bit of a shame that more can't easily be done on the "front" end to simply make things line up like that more consistently/adjust on a row basis easier, but there still remans so many factors involved... Ie. On a responsive template with a mobile device, often each product is on it's own row, therefore the "alignment" doesn't really factor in, but providing ever more css to accomodate just makes more information to load... So needs the balance... I guess further the use of min-height does take some "processing" to figure it out so that too can be a draw on loading... Maybe I've just been schooled. :P will consider the discussion in future applications. :)

mc12345678:

I do believe (pretty much expect) that the size suggestion came from "testing" and that the comment wasn't directed to me

Correct. Not directed specifically to you. (As always, I tend to respond to the post rather than the person). :-)

mc12345678:

The min-height of 30px would still serve the same purpose/effect generally speaking and yes could result in a "push" of one or more products if the full character (default) length were used.

No, I can't agree with this. The problem was caused by this "push", therefore a solution that doesn't cure the problem in all cases isn't really a solution - It is at best, a partial/conditional solution.

mc12345678:

Guess I go for more of the ahh, so on occasion the perfect lineup may get affected,

But, but, but .... that is the problem the OP wanted solved. ;-)

mc12345678:

but at all times the customer sees all of the information "pertinent" to the product perspective.

The customer only gets to see what the merchant wants them to see. It is the merchant that decides what is pertinent. :-)

mc12345678:

If that is not considered satisfactory to the store owner then explain the reasons (much like done above) and if look is the only factor of the owners desire, then so be it, fix the size to what has been requested, with explanation as to why I disagree with it...

The store owner doesn't need to explain to a customer how much of what text is displayed where (or why).

mc12345678:

It's a bit of a shame that more can't easily be done on the "front" end to simply make things line up like that more consistently/adjust on a row basis easier,

So you mean something like the
configuration->product Listing ->Display ProductDescription setting that limits the amount of descriptive text displayed in the indexes, but for the product titles instead?

The OP/merchant could assume (much like I did) that there is no need for such a setting for the product titles because they are quite short anyway, and therefore devise a fix that simply takes the maximum default into consideration (rather than limiting the text to the space avialalabe)

mc12345678:

but there still remans so many factors involved... Ie. On a responsive template with a mobile device,

Touche. You got me there.

mc12345678:

often each product is on it's own row, therefore the "alignment" doesn't really factor in,

I think you've just un-touche'd me. <g> I hadn't thought of that 'comeback'.

mc12345678:

but providing ever more css to accomodate just makes more information to load... So needs the balance... I guess further the use of min-height does take some "processing" to figure it out so that too can be a draw on loading..

FWIW, I've very recently been on this roundabout with a customer of ours. He didn't like the alignment shifts caused by the longer product titles. He didn't like all the extra whitespace caused with the min-height setting, and he didn't like a portion of the longer titles being 'hidden' due to the fixed height setting.

After much debate, and explaining to him that he can't have it all ways and needed to choose one of the three, he settled on the fixed height option as being the lesser of the three 'evils'.

I'm not saying that this is the right solution for everyone, and frankly, it probably would have been better to simply add code to truncate the titles to a more suitable length to achieve the same end result - ESPECIALLY since different browsers have a slightly different 'hide point'.

The height setting needs to be 'pixel perfect' because if it isn't the descenders of the characters above the hide point get chopped off, or the ascenders of the characters below hide point gets displayed as random dots. Even with this 'pixel perfect' setting firefox chops off the descenders while chrome shows the ascenders (for the same product titles). This is something that most people wouldn't notice (or not give it a second thought if they did) - but this particular client is very fussy/picky about fine details such as this.

mc12345678:

Maybe I've just been schooled. :P will consider the discussion in future applications. :)

Please keep this caveat in mind though. Using the height vs min-height does take a little bit more consideration, especially in regards to cross browser compatibility where the font being used uses ascenders/descenders (not all do, and even those that do won't all suffer this problem as the fonts themselves could have different line spacings) - and then there is also the fact that these spacings can be .css controlled. IOW, it isn't even always going to be an issue. This 'caveat' is more a result of this particular customer that is very fussy about 'white space', more than anything else. It is/was a very 'challenging' task to do what he required. Thankfully most clients are a little more flexible and a simple change of font or spacing would have eliminated this "balancing act".

Cheers
RodG