Line up products

[jurg1505]

How can i line up products ?

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

http://zwembaden-zwembad-materialen....dex&cPath=9_10

[kobra]

Standardize your image heights

[RodG]

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

[mc12345678]

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.

[RodG]

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

[mc12345678]

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. will consider the discussion in future applications. :)

[RodG]

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