Skip to main content

Responsive design

Multi-line ellipsis using simple CSS

Easiest and more bulletproof way to handle multi-line truncation of strings, so I found that we can truncate string using two carefully placed CSS pseudo elements.

Here’s the full CSS. We’ll walk through the code below.

Manoj Kumar Wed, 04/06/2016 - 03:47
Ellipsis using css
knackforge blog knowledge base

Responsive vertical column layouts using jQuery Plugin

Usually while we add contents to a div, it get arranged accordingly to our web styles. But there are some special cases where we need our contents to be arranged in a vertical manner as like the newspaper (or) journal content. To achieve this vertical fashion of content alignment, after a very long and vast search, we found these jQuery plugin to customize the column layouts dynamically based on these plugins:

  • columnizer.js
  • isotope.js
Deal with hover in touch events

How to deal with hover on touch screen devices

Links with hover styles on touch devices are a bit of a complication. In short, they don’t really exist on these devices. Creating fancy :hover styles can really add to the browser experience and help simplify your layout, but they simply will not work on a touch device. When a tablet or smartphone user taps your hover-styled link elements, the hover style shortly appears, and immediately the underlying link is followed/activated.
So how do we handle this problem?
Forbid Zooming in Mobile, Tablet Devices

We all have cognizance about the concepts behind the Responsive Design, this makes us to just use one site across all devices like Desktop, Tablet, Smartphone and even Phablet.

sabareesh Wed, 07/03/2013 - 01:35
knackforge blog knowledge base
Subscribe to Responsive design