Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

troy beckett
troy beckett
12,035 Points

Help on making a responsive website.....

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


<!DOCTYPE html>
    <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">
    <div class="container clearfix">
        <div class="grid_4">
            <img src="images/logo.gif" alt="baking company">
        <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>
        <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 class="grid_3 omega">
            <img src="images/you-bake-me-blush.gif" alt="You Bake me Blush">
        <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 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 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 id="contact" class="grid_5 omega">
            <h2>Get Bakin With Us</h2>

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

            <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 id="copyright" class="grid_12">
            <p>&copy; smells like bakin comapny all rights reserved</p>


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_12 {
    margin: 0 2% 1% 0;
    float: left;
    display: block;


    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;

    background-color: #4cc4a7;

ul.nav {
    margin: 120px 0 0 0;
    float: right;

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

ul.nav li a {

#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; 

1 Answer

Kevin Korte
Kevin Korte
28,148 Points

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.