Tag: responsive design
Using the CSS3 vh (viewport-height) Unit

I’ve recently fallen in love with the CSS3 vh property. (vh stands for “viewport-height.”) It lets you make things a certain percentage of the height of your browser window itself—whether that “viewport” is a tablet screen, a phone screen (in portrait or landscape), a laptop, a desktop, a smart fridge(?), or what have you.
Emulate Mobile Devices In-Browser with the Ripple Chrome Extension

This week, I had a client send me a bug that only appeared in iOS Safari. As much as I’d love to say “tell your visitors not to use iOS Safari,” it’s definitely a popular enough way to browse the web to merit fixing the bug.
Some Common Mobile Device Widths

Here is some very useful information on an oddly outdated-looking page. It gives device widths for a range of iPhones, iPads, Samsung phones, and so on.
Responsive, JavaScript-Free Masonry Layouts with CSS3 Columns

I recently needed to create a number of masonry layouts for a WooCommerce website I’m building for a friend. I didn’t want to resort to jQuery, and that’s how, at long last, I found CSS3’s columns property. It lets you do CSS-only layouts that look like this:
Browser-Relative Heights with CSS3 Viewport Percentage

In the first of a few “Whaaaat I had no idea CSS3 did that” posts from me: You can set elements to be a percentage of the height of your browser window!