forcing a product name to span maximum 2 lines on a responsive design

Hello, I wanted to get some feedback on an issue I am facing. I have a product listing page where the product names can be quite lengthy.

you can see an example at:

http://www.createimpressions.co.uk/projects/armadillo/category.php?Department=Living-Dining&Category=Occasional-Chairs

focus attention on the product tiles, and then slowly reduce browser width, now because some product names are shorter than others, the result is that some product names remain on one line, or two lines, further reducing browser width, some product names then span 3 lines...this then causes the product tiles to be miss-aligned.

One solution is to reduce the number of characters to display and append '...' but because the website is responsive this approach, still wouldnt work.

if there another approach I could take?

Could a solution be something like using CSS overflow:hidden (or is that for something entirely different?)

What would be the best solution?

Chris

sounds like you should be using flexbox to achieve this Chris.

This codepen shows it in action: http://codepen.io/imohkay/pen/gpard or this http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

A technique I've used is to add classes based on the position in the php. "aftersecond", "afterthird", "afterfourth", "afterfifth"...

Then in the responsive code when I know there are four records per row I add a clear:both to the afterfourth class and so on. It doesn't prevent the words from wrapping onto more than two lines, but it prevents it from throwing off the rest of the page.

@Jamie I am scared of using FlexBox ;-) I would love to, but I guess its down to the customer/user base for clients business. if a high percentage of my clients customers use IE8 or IE9 then FlexBox wont work. What are your thoughts on this?

@Jamie I am scared of using FlexBox ;-) I would love to, but I guess its down to the customer/user base for clients business. if a high percentage of my clients customers use IE8 or IE9 then FlexBox wont work. What are your thoughts on this?

I agree its a dilemma that we have always faced - particularly with IE6 that we had to put up with for so long.

From all my reading and investigation, the browser uptake/upgrade these days is a far quicker process the people seem to take and the really the oldest IE browser that *should* be supprted, in my opinion, is 10 (https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0&qpcustom=)

That being said, if a clients userbase is demonstrably using an older browser that doesnt support certain asepcts then we can design accordingly but if there are time issues with doing that then they understand there will be a cost.

As part of our T&C we state that we shall make every effort to ensure sites are designed to be viewed by the majority of visitors. Sites are designed to work with the standard development platform, which includes recent versions of the main browsers, Internet Explorer, Google Chrome and Mozilla Firefox. The Client agrees that the Motley.co.uk cannot guarantee correct functionality with all browser software across different operating systems and in particular on older versions of the different browser platforms. If compatibility is specifically required for older browsers this needs to be stated from the outset as additional hours may be required to achieve this.

I suppose the 'moral' is that its a case by case scenario but the benchmark we use is based on current(ish) browser support and use this as our yardstick (in the case of flexbox): http://caniuse.com/#feat=flexbox

Hoep that helps and thats just us, would love to hear your thoughts on it as well

Jamie

Hey Chris

Just as a follow up, just got notified by Zendesk that they will no longer be supporting Internet Explorer 8, 9 & 10

https://support.zendesk.com/hc/en-us/articles/217103598

I know that this doesnt mean their impending doom, but it would suggest that perhaps the fact that the web wont allow what happened with IE6 to happen again (ie it took sooooo long to die and affected far too many corners of the internet unecessarily).

Jamie

I don't know if this is useful but we use css, the page is fully responsive

.block {
height: 60px;
display: block;
}

https://www.jadremtoys.com.au/

Cheers

Hey Warrio

Love the site!

The only problem with your solution is that its a fixed height for all the boxes and they dont resize/adjust according to the size of the content (and then resize all the other boxes to the same so that there are no offsets.

Its perfect if youre able to control the content within the boxes

Jamie