making font-size fluid and grid widths fluid on webpage....

Question

I've posted some code below and would just like someone with a bit more experience and skill to tell me with I've made the font-sizes, and grid widths fluid on this website. I'm not sure If I've missed anything out.

html code

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8">
    <title> Smells Like Baking Cupcake Company</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>
<body>
    <div class="container clearfix">
        <div class="grid_4">
            <img src="images/logo.gif" alt="baking company">
        </div>
        <div class="grid_8 omega">
            <ul id="nav-bar" class="nav">
                <li><a href="#">About</a></li>
                <li><a href="#">Cupcakes and Prices</a></li>
                <li><a href="#">Locations</a></li>
                <li class="last"><a href="#">Contact Us</a></li>
            </ul>
        </div>
        <div id="intro" class="grid_9">
            <h1>Opposites really do attract, especially in our kitchen we combine all flavours to bring you the best</h1>
            <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
        </div>
        <div class="grid_3 omega">
            <img src="images/you-bake-me-blush.gif" alt="You Bake me Blush">
        </div>
        <div id="featured-cupcake" class="grid_7">
            <h2>Cupcake of the Week</h2>
            <p>This week's featured cupcake is the <a href="#">Avacado Chocolate cupcake</a> its strange combo flavours will kick you into shape</p>
            <img src="images/featured-cupcake.jpg" alt="Avacado Chocolate Cupcake">
        </div>

        <div id="new-cupcakes" class="grid_5 omega">
            <h2>Fresh Out the Oven</h2>
            <p>Our newest cupcakes are <a href="#">Bacon me crazy</a> so so so <a href="#">spicy</a></p>
            <img src="images/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
            <img src="images/new-cupcake-jalapeno.jpg" alt="sooooooo spicy">
        </div>

        <div id="inside-kitchen" class="grid_7">
            <h2>Inside the Kitchen</h2>
            <p>"They both have similar feedback with the car, and there are aspects of this year's rules that make the cars across the pitlane a far from easy aspect for the driver. There is a lot more torque from the engine, a lot less aerodynamic grip, and the tyres are deliberately less aggressive than last year.</p>
            <p><a href="#" class="btn-small">Read More</a></p>
        </div>

        <div id="contact" class="grid_5 omega">
            <h2>Get Bakin With Us</h2>


            <div>
                <p>Call us: <span>0123456799</span><br>
                Email us:<a href="#">baking.com</a></p>
            </div>


            <p>We take booking requests through our Facebook and Twitter</p>
            <a href="http://www.facebook.com"><img src="images/facebook.gif" alt="facebook"></a>
            <a href="http://www.twitter.com"><img src="images/twitter.gif" alt="twitter"></a>
        </div>

        <div id="copyright" class="grid_12">
            <p>&copy; smells like bakin comapny all rights reserved</p>
        </div>

    </div>
</body>
</html>

font size code

/*********** FONT SIZE SECTION*************/
/******************************************/

#nav-bar {
    font-size: 1.0625em;  /*17px*/
}

h1 {
    font-size: 1.750em;
    letter-spacing: 0.03375em; /*-1.5px*/
}

h2 {
    font-size: 1.500em;
    color: #b4c34f;
}


.btn {
    font-size: 1.1875em; /*19px*/
}

#featured-cupcake p  {
    font-size: 1em; /*16px*/
}

#new-cupcakes p  {
    font-size: 1em; /*16px*/
}

#inside-kitchen p {
    font-size: 1em; /*16px*/    
}

#contact p  {
    font-size: 1em; /*16px*/
}

#copyright p  {
    font-size: 1em;
}

/**************************************************************/
/**************************************************************/

grid code

/*
 Width: 1000px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 

 */
.grid_1 { width: 6.5%; } /*65px*/
.grid_2 { width: 15%; } /*150px*/
.grid_3 { width: 23.5%; } /*235px*/
.grid_4 { width: 32%; } /*320px*/
.grid_5 { width: 40.5%; } /*405px*/
.grid_6 { width: 49%; } /*490px*/
.grid_7 { width: 57.5%; } /*575px*/
.grid_8 { width: 66%; } /*660px*/
.grid_9 { width: 74.5%; } /*745px*/
.grid_10 { width: 83%; } /*830px*/
.grid_11 { width: 91.5%; } /*915px*/
.grid_12 { width: 100%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin: 0 2% 1% 0;
    float: left;
    display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
    width: 90%;
    max-width: 1000px;
    margin: auto;
}



.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

Welcome to the Treehouse Community

Looking to learn something new?

troy beckett

troy beckett

making font-size fluid and grid widths fluid on webpage....

Dean jenkins

Dean jenkins

troy beckett

troy beckett