Posts Tagged ‘Responsive development’

Content equal to browser height & centered

Friday, October 3rd, 2014

15 October 2014: updated to include feedback from comments.

A current design pattern on some scroll-hijacking sites is to have each section as tall as the browser window so you see that content without distraction before moving onto the next.

This is a demo of content equal to browser height using CSS with a fall-back coffeescript solution for browsers that don’t understand css transforms. It is also responds to any adjustment in height and width of the browser window. (more…)

Five ways with responsive tables

Monday, June 16th, 2014

Recently I was uninspired by Bootstrap’s cop-out for responsive tables where they just add horizontal scrollbars for widths under 768px.

I’d come across a few ideas in the past and now I’m exploring them to give pros and cons for each solution. (more…)

Problem: Background image overlapping right-hand-side of the grid

Friday, November 22nd, 2013

The first in what I hope is a series of simple techniques to get around problems that at first sight might seem impossible. I like to say that everything is possible given a bit of thought*.

This technique is for when you need to place a background-image more than 100% to the right of the page. (more…)

Fluid width squares in CSS

Wednesday, June 5th, 2013

It’s easy to make a perfect square in CSS – set an equal height and width and boom, you’re done. But what if you don’t always know the width of the square? For instance you’ve given the structures percentage widths to fit a fluid container.

No hacks, no javascript? (more…)

My responsive web development technique

Saturday, May 5th, 2012

Responsive web development is a relatively new technique and one that I’ve been implementing for the last 9 months or so professionally. Many articles have been written about how you should create a responsive site and wanted to get mine out there too. (more…)