Help on making a responsive website.....

Question

I've literally been stuck on this for days now and I understand it's probably something small but I just can't figure it out. I'm trying to make this website more responsive. Currently I'm trying to make the text/font-size,grid widths and margins fluid. So that as the browser screen gets smaller the webpage gets smaller to. Can someone please just take a look and tell me what they think is wrong I have no clue at all and it's turning into a nightmare...

index.html

<!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>

grid.css 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}

style.css code

body {
    font-family: 'Nunito', sans-serif;
    color: #FAF3BC;
    background: #420600 url('img/bg-texture.jpg') repeat;
}

a {
    color: #4FB68F;
    text-decoration: none;
}


/*********** 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;
}

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

/************MARGINS ON WEBSITE********************************/
/**************************************************************/


.btn {
    color: #FAF3BC;
    background: #4FB69F url('img/texture.png') no-repeat right top;
    padding: 15px 30px;
    margin: 40px 0px;
    border-radius: 25px;
    text-transform: uppercase;
}

.btn:hover{
    background-color: #4cc4a7;
}

ul.nav {
    margin: 120px 0 0 0;
    list-style:none;
    float: right;
}

ul.nav li {
    float: left;
    margin-right: 40px; 
}

ul.nav li a {
    color:#faf3bc;
}

#intro {
    margin: 5% 0 7.5% 0; /*50px 0 75px 0*/
}

#new-cupcakes img {
    border: 8px solid #faf3bc;
    margin: 0 0 2% 0; /* 0 0 20px 0;*/
}

#featured-cupcake img {
    border: 8px solid #faf3bc;
}

#copyright {
    border-top: 8px solid #2a0400;
    padding: 1% 0; /*10px 0px;*/
    margin:  1.5% 0; /*15px 0px;*/
    text-align: center; 
}

Answer 1 · 2014-06-10T18:17:04Z

June 10, 2014 6:17pm

It's really difficult to troubleshoot just looking at raw code. Why don't you set your site up as a pen on Codepen and go from there.

Welcome to the Treehouse Community

Looking to learn something new?

troy beckett

troy beckett

Help on making a responsive website.....

1 Answer

Kevin Korte

Kevin Korte