Responsive page layout example code. A user resource provided by The Gorilla Guide

This is the code for The Gorilla Guide responsive page example. Feel free to copy and use it as the basis of your own responsive pages. Here's the web page it creates.

Back



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <!-- This document copyright(c) The Gorilla Guide 2010-2015. It may be copied,--> 
    <!-- modified or reused for any purpose. If you publish this document in any  --> 
    <!-- form you must include this copyright declaration. The Gorilla Guide      -->
    <!-- must also be acknowledged if this document is redistributed in a         -->
    <!-- predominantly unmodified form.                                           -->
	
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    <!-- Tell the browser that this content is responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1" >

    <style type="text/css">
        /* page container to control horizontal position and width of active page body */
        #pagearea { 
            margin: 0 auto; 
            max-width: 1100px; 
        }
		
        /* set the column alignments */
        #left, #main, #right { float: left; }
        #footer         { clear: both; }
       
        /* set the relative column widths */
        #header         { width: 100%; }
        #main           { width: 55%; } 
        #left           { width: 25%; }
        #right          { width: 20%; }

        /* set styling for multi-column layout */
        body            { background-color: #F6F6FF; }
        #pagearea       { 
            background-color: 
            white; font-size: 0.9em; 
            font-family: Verdana, 
            Helvetica, san-serif; 
        }
        #header         { 
            background-color: 
            black; color: white; 
            font-family: 'Times New Roman', Georgia, Serif; 
            margin-bottom: 1em; 
        }
        div.articlebox  { 
            padding: 0 0.5em 0.5em 0.5em; 
            margin: 0 0.2em 0.5em 0.2em; 
            border: 1px solid Lavender; 
        }
        
        /* set any other content styling */		
        #header h1      { 
            font-size: 3em; 
            padding: 0px 9px 7px 9px; 
        }
        #header p       { 
            display; block; 
            font-size: 1em; 
            margin-bottom: 0; 
        }
        #header p a     { 
            color: CornflowerBlue; 
            margin: 0 0.6em; 
        }
        h1, h3, h4      { 
            padding: 0; 
            margin: 0.25em 0 0 0; 
        }
        h5              { 
            margin: 0.25em; 
            font-style: italic; 
        }
        img             { 
            margin: 5px 9px 9px 0; 
            border: 1px solid lightgray; 
            max-width: 100%; 
        }	
        #footer p       { padding: 0 0 9px 9px; }

      
        /* Restyle devices less than 800px */
        @media only screen and (max-width: 800px) {
            /* Reset the column widths */
            #main       { width: 100%; }
            #left       { width: 60%; }
            #right      { width: 40%; }
            /* Reset header style */
            #header h1  { font-size: 2.4em; }
            #header p a { font-size: 1.4em; text-decoration: none; }
            h1          { font-size: 1.7em; }
            .mobile-hide  { display: none; }
        }   
	    
        /* Restyle devices less than 400px */
        @media only screen and (max-width: 400px) { 
            /* Reset the column widths */
            #left       { width: 100%; }
            #right      { width: 100%; }
            /* Restyle header */
            #header p   { background-color: darkgreen; 
                border-bottom: 2px solid #DDD; 
                text-align: center; 
                padding: 0.4em;
            }
            #header p a { padding: 10px 50px; }
        }  

    </style>
</head>
<body>
    <div id="pagearea">
        <div id="header">
            <p> 
                <a href="responsive-page-example-code.html">example script</a>
                <a id="mobile-hide" href="responsive-page-design-made-simple">back to article</a>
            </p>	
            <h1>Responsive page layout example</h1>
        </div>

        <div id="main">
            <div class="articlebox">
                <h1>Responsive web design</h1>
                <h5>This page is an example of responsive web page design made easy. 
                Try resizing it on a desktop and watch the columns reflow and the header change its 
                style to be mobile-friendly</h5>
                <img src="image.jpg" alt="Headline article image" />
                <p>Fusce id arcu at nibh semper accumsan. Nulla dui magna, tristique
                vel sagittis nec, hendrerit et nunc. Integer gravida lectus vitae
                tortor congue sed accumsan magna pulvinar. Aenean sagittis ipsum
                condimentum lacus mollis venenatis nec sollicitudin sapien. Nullam
                at velit nisl. 
                </p>
                <p>Donec a porttitor enim. Integer condimentum elit eget felis 
                euismod	ultrices. Vivamus et erat sit amet ipsum suscipit bibendum.
                Mauris cursus facilisis rhoncus. Morbi fringilla turpis felis, at
                consectetur magna. 
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Phasellus congue, erat sed scelerisque imperdiet, risus dolor
                vulputate nibh, sed posuere tellus nisl ac felis. Praesent sed
                accumsan metus. Vivamus et erat sit amet ipsum suscipit bibendum. 
                Mauris cursus facilisis rhoncus. Morbi fringilla turpis felis, at
                consectetur magna. Donec et felis vel mi viverra blandit non id
                odio. Nulla justo felis, ornare quis rhoncus porta, dictum nec
                orci.
                </p>
                <p>In pellentesque sem non augue auctor sagittis ac et quam.
                Vivamus at orci ut orci consectetur interdum. Nullam rutrum, purus
                vitae euismod feugiat, magna dui tincidunt est, ac eleifend nibh
                odio a ligula. 
                </p>
            </div>	
        </div>

        <div id="left">
            <div class="articlebox">
                <h3>Latest news</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Phasellus congue, erat sed scelerisque imperdiet, risus dolor vel
                vulputate nibh, sed posuere tellus nisl ac felis. Donec et felis
                mi viverra blandit odio. non id odio. Nulla justo felis, ornare
                quis rhoncus porta, dictum nec orci.
                </p>
            </div>
            <div class="articlebox">
                <h4>Other news</h4>
                <p>Praesent sed accumsan metus. Vivamus et erat sit amet ipsum
                suscipit bibendum. Mauris cursus facilisis rhoncus.
                </p>
            </div>
        </div>

        <div id="right">
            <div class="articlebox">
                <h4>Gossip</h4>
                <p>Donec a porttitor enim. Integer condimentum elit eget felis
                euismod ultrices. Vivamus et erat sit amet ipsum suscipit bibendum. 
                Mauris cursus facilisis rhoncus. Morbi fringilla turpis felis, at 
                consectetur magna. Praesent sed accumsan metus. Vivamus et erat sit 
                amet ipsum suscipit bibendum.
                </p>
                <p>Praesent sed accumsan metus. Vivamus et erat sit amet ipsum
                suscipit bibendum. Mauris cursus facilisis rhoncus.
                </p>
            </div>
            <div class="articlebox">
                <h4>Other drivel</h4>
                <p>Donec a porttitor enim. Integer condimentum elit eget felis
                euismod ultrices. Vivamus et erat sit amet ipsum suscipit bibendum. 
                Mauris cursus facilisis rhoncus. Morbi fringilla turpis felis, at 
                consectetur magna. Praesent sed accumsan metus. Vivamus et erat sit 
                amet ipsum suscipit bibendum.
                </p>
            </div>
        </div>

        <div id="footer">
            <hr />
            <p><b><a style="color: RoyalBlue" href="http://thegorillaguide.com">
            The Gorilla Guide</a> - inspired web design</b>
            </p>
        </div>
	
    </div><!-- end page area -->

</body>
</html>

The Gorilla Guide - inspired web design