christophergorexyz · January 24, 2014 20:21
diff --git a/super-simple-responsive.html b/super-simple-responsive.html
 <!DOCTYPE HTML>
 <html>
 <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
 
    <title>Super Simple Responsive</title>
 
    <style type="text/css">
        /*
            Make sure that when we set width, it includes the border and padding.
            By doing this, we can say something spans 100% of the width of another
            element without the border and padding overflowing
        */
        * {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
 
        /*
            We'll be using inline block styling within, so to avoid doing confusing things
            to handle the whitespace, like setting a negative margin on the inline-block elements, 
            we set the containing element to have font-size: 0.
 
            The drawback to this method is that we must then reset the font-size in child elements.
            
            See: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
 
            We can use a similar trick with line-height to achieve vertical centering.
        */
        .stacking-row {
            font-size:0;
        }
 
        .content-block {
            /* These elements are inline-block, and will wrap if their size extends beyond the width of their container */
            display: inline-block;
            /* Supposing we have two blocks in this row, we can set them to 50% width for large screens */
            width: 50%;
            padding: 1em;
            /* Resetting the font here - "medium" is the default height, "normal" the default line-height */
            font: medium/normal Arial;
            color:White;
        }
 
        /* Some distinctive coloring for demonstrative purposes */
        .first {
            background: DarkRed;
        }
 
        .second {
            background:Chocolate;
        }
 
        /*
            When the screen is smaller than 480px, we set the blocks to the full width of the containing element.
            Because the elements with class "content-block" are defined to display as inline-blocks, they automatically
            wrap when they extend beyond the width of the display. In this case, we've set them each to 100% the width
            of their container, which is constrained by the width of the browser (manually setting a constraint works as
            well). When the items wrap, they produce a stacking effect.
        */
        @media (max-width: 480px){
            .content-block {
                width:100%;
            }
        }
    </style>
 </head>
 <body>
    <div class="stacking-row">
        <div class="content-block first">
            First
        </div>
        <div class="content-block second">
            Second
        </div>
    </div>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title>Super Simple Responsive</title>

	<style type="text/css">
	/*
	Make sure that when we set width, it includes the border and padding.
	By doing this, we can say something spans 100% of the width of another
	element without the border and padding overflowing
	*/
	* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	/*
	We'll be using inline block styling within, so to avoid doing confusing things
	to handle the whitespace, like setting a negative margin on the inline-block elements,
	we set the containing element to have font-size: 0.

	The drawback to this method is that we must then reset the font-size in child elements.

	See: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

	We can use a similar trick with line-height to achieve vertical centering.
	*/
	.stacking-row {
	font-size:0;
	}

	.content-block {
	/* These elements are inline-block, and will wrap if their size extends beyond the width of their container */
	display: inline-block;
	/* Supposing we have two blocks in this row, we can set them to 50% width for large screens */
	width: 50%;
	padding: 1em;
	/* Resetting the font here - "medium" is the default height, "normal" the default line-height */
	font: medium/normal Arial;
	color:White;
	}

	/* Some distinctive coloring for demonstrative purposes */
	.first {
	background: DarkRed;
	}

	.second {
	background:Chocolate;
	}

	/*
	When the screen is smaller than 480px, we set the blocks to the full width of the containing element.
	Because the elements with class "content-block" are defined to display as inline-blocks, they automatically
	wrap when they extend beyond the width of the display. In this case, we've set them each to 100% the width
	of their container, which is constrained by the width of the browser (manually setting a constraint works as
	well). When the items wrap, they produce a stacking effect.
	*/
	@media (max-width: 480px){
	.content-block {
	width:100%;
	}
	}
	</style>
	</head>
	<body>
	<div class="stacking-row">
	<div class="content-block first">
	First
	</div>
	<div class="content-block second">
	Second
	</div>
	</div>
	</body>
	</html>
No results found