HTML is almost 100% responsive by default. These 247 bytes of css fix the 'almost' part.

Download Fork Tweet


Responsive images

placeholder kitten

Example code

<img src="http://placekitten.com/2400/700" alt="placeholder kitten">

Responsive tables

First Name Last Name Twitter Handle Favorite Food Favorite URL Favorite HEX Favorite Cat Second Favorite Cat Third Favorite Cat
Adam Morse @mrmrs_ Pizza http://☠☣.ws #C0FFEE Francesca Jasper Sappho
Connor Sears @connors Pizza http://goratchet.com #0074d9 Grumpy Jasper Sappho
Mark Otto @mdo Pizza http://getbootstrap.com #069 Bubba Smelly Sappho
Jxn Blk @jxnblk Hamburger Buttons http://catfinity.com #111111 Francesca Jasper Sappho
Kristofer Joseph @dam Pizza http://topcoat.io #ddaa13 Francesca Jasper Sappho

Example code

<div class="overflow-container">
   <!-- table contents -->

Responsive preformatted text

# Add the strings before and after around each parm and print
def surround(before, after, *items)
    items.each { |x| print before, x, after, "\n" }

surround('[', ']', 'this', 'that', 'the other')
print "\n"

surround('<', '>', 'Snakes', 'Turtles', 'Snails', 'Salamanders', 'Slugs',
print "\n"

def boffo(a, b, c, d)
    print "a = #{a} b = #{b}, c = #{c}, d = #{d}\n"

# Use * to adapt between arrays and arguments
a1 = ['snack', 'fast', 'junk', 'pizza']
a2 = [4, 9]
boffo(17, 3, *a2)

Example code

<div class="overflow-container">
      ... Code here ...

Responsive canvas elements

Example tweaked from HTML5 Canvas Tutorials...

Responsive iframes