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

CSS

Posted by karthikkn
karthikkn
5,397 Points

facing problem with grid 

<!DOCTYPE html>
<html>
<head>
    <title>Hillspeak</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="hills.css">
    <link rel="stylesheet" type="text/css" href="grid.css">
    <meta name="view-port" content="width=device-width initial-scale = 1.0">
</head>
<body>
    <div class="main-header cf">
        <div class="grid-container">
            <div class="grid-4 logo"><a href="index.php"><img src="img/logo.gif"></a></div>
            <ul class="grid-8 nav">
                <li><a href="index.php">Home</a></li>
                <li><a href="shirts.php">Shirts</a></li>
                <li><a href="contact.php">Contact</a></li>
                <li><a href="faq.php">Faq's</a></li>
            </ul>
        </div>
    </div>
    <div class="main-container">
        <div class="grid-container">
            <h1>Latest-Catalog of Shirts</h1>
            <ul class="grid-container latest">          
                <li><a href="shirt.php"><img src="img2/shirt-101.jpg">View-Details</a></li>
                <li><a href="shirt.php"><img src="img2/shirt-102.jpg">View-Details</a></li>
                <li><a href="shirt.php"><img src="img2/shirt-103.jpg">View-Details</a></li>
                <li><a href="shirt.php"><img src="img2/shirt-104.jpg">View-Details</a></li>
            </ul>
        </div>
    </div>
    <div class="main-footer">
        <p class="mf">
            &copy; Hillspeak inc <?php echo date('Y'); ?>
        </p>
    </div>
</body>
</html>

the file for css hill css
* {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
body {
    background: lightgrey;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
.main-header {
    background: #fff;
    padding: 5px;
}
.logo {
    margin-top: 0;
    margin-bottom: 0;
}
.nav a {
    display: block;
    background: steelblue;
    color: #fff;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    font-size: 24px;
}
.nav li {
    margin: 10px 0 10px 0;
}
.latest li {
    display: inline-block;
    width: 200px;
    background: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0 10px 0;
}
.main-footer {
    padding: 10px;
    background: yellow;
    margin-top: 50px;
    text-align: center;

}
@media (min-width: 768px) { 
    .logo img,
    .nav li {
        float: left;
    }
    .nav a{
        background: none;
        padding: 0;
        color: #000;
    }
    .nav li {
        margin-left: 30px;
        margin-top: 140px;
        float: right;
        }

    }

the fill for grid grid css
.grid-container {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto;
}
/***********************
    width 65px with 20px gutter
***********************/
@media (min-width: 768px) {
    .grid-container > [class^="grid-"]{
        float: left;
        margin-left: 2%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .grid-container > [class^="grid-"]:first-child {
        margin-left: 0;
    }
    .grid-container > [class^="grid-"]:last-child {
        float: right;
    }
    .grid-1 {
        width: 6.5%;
    }
    .grid-2 {
        width: 15%;
    }
    .grid-3 {
        width: 23.5%;
    }
    .grid-4 {
        width: 32%;
    }
    .grid-5 {
        width: 40.5%;
    }
    .grid-6 {
        width: 49%;
    }
    .grid-7 {
        width: 57.5%;
    }
    .grid-8 {
        width: 66%;
    }
    .grid-9 {
        width: 74.5%;
    }
    .grid-10 {
        width: 83%;
    }
    .grid-11 {
        width: 91.5%;
    }
    .grid-12 {
        width: 100%;
    }
    .cf:after,
    .grid-container:after {
        content: "";
        display: table;
        clear: both;
    }
}
@media (min-width: 1200px) {
    .grid-container {
        max-width: 1100px;
    }
}

2 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Karthikkn;

Based on the code you posted, you are missing a closing curly bracket at the end of your last media query.

Ken

karthikkn
karthikkn
5,397 Points

sorry for that, i have edited the code the image link is Problem with grid why the shirts img are doing strange things

karthikkn
karthikkn
5,397 Points
karthikkn
karthikkn
5,397 Points

hurray, Solved the issue, Felling very happy, that i am capable of solving my own coding errors, thanks treehouse