close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

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

Thread began 3/21/2016 4:24 pm by Christopher West | Last modified 3/24/2016 1:47 pm by Ray Borduin | 669 views | 8 replies |

Christopher WestCommunity Expert

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

Sign in to reply to this post

Jamie

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

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

Christopher WestCommunity Expert

@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?

Sign in to reply to this post

Christopher WestCommunity Expert

@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?

Sign in to reply to this post

Jamie

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

Sign in to reply to this post

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

Sign in to reply to this post

Warrio

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

Sign in to reply to this post

Jamie

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

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...