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 Chris Campos
Chris Campos
2,641 Points

My Image Messes Up My Grid

When I try to make a grid layout with an image, it messes up, and I don't know why. I am using the normalize and grid layout provided by treehouse. HTML

<div class="container clearfix">
    <div id="logo" class="grid_5">
        <a href="#" title="title">
        <h1>MY TITLE HERE</h1>
        </a>
    </div>
    <div id="nav" class="grid_7 omega">
        <ul class="nav">
            <li><a href="#"><img src="img/fblogo.png" alt="Facebook"></a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Subscribe</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div class="grid_4">
        <img src="img/testimage.png" width="272" height="389">
    </div>
    <div class="grid_8 omega">
        <h1>Want My Stuff? We've Got Them For You!</h1>
        <p>Here is some sample text.Here is some sample text.Here is some sample text.Here is some sample text.Here is some sample text.Here is some sample text</p>
        <a href="#" rel="nofollow" class="btn">Click Here To Begin</a>
    </div>
    </div>
  ``'

CSS

```css
@charset "utf-8";
/* CSS Document */
body {
    font-family: 'Chau Philomene One', sans-serif;
    background-image:url(img/bg-texture.png);
    }
a {
    color: #999;
    text-decoration: none;
    }
img {
    max-width: 100%;
    }
.center{
    text-align:center;
    }       
h2 {
    color: #666;
    }   
h3 {
    color: #999;
    }
.btn {
    color: #999;
    background-color: #000;
    padding: 15px 30px; /*15px and 30px*/
    margin: 0 0 0 50%; /*40px*/
    border-radius: 15px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    text-transform: uppercase;
    }
.btn:hover {
    color: #000;
    background-color: #999;
    }
ul.nav {
    width: 100%;
    margin: 2% 0 0 0;
    list-style: none;
    float: right;
    }
ul.nav li {
    float: left;
    margin: 0 3%;
}
ul.nav li a {
    font-size: 1.5em;
    color: #CCC;
    display: block;
    text-decoration: none;
    }
ul.nav li a:hover{
    color:#000;
    }
Andrew Whitfield
Andrew Whitfield
5,239 Points

If you edit your question code and use 3 backticks instead of 1 before and after, it should format better.

Can you put your code up into jsfiddle.net to be viewed?

2 Answers

William Whitworth
William Whitworth
6,117 Points
William Whitworth
William Whitworth
6,117 Points

Looking at it now, just formatting CSS correctly

@charset "utf-8";
/* CSS Document */
body {
    font-family: 'Chau Philomene One', sans-serif;
    background-image:url(img/bg-texture.png);
    }
a {
    color: #999;
    text-decoration: none;
    }
img {
    max-width: 100%;
    }
.center{
    text-align:center;
    }       
h2 {
    color: #666;
    }   
h3 {
    color: #999;
    }
.btn {
    color: #999;
    background-color: #000;
    padding: 15px 30px; /*15px and 30px*/
    margin: 0 0 0 50%; /*40px*/
    border-radius: 15px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    text-transform: uppercase;
    }
.btn:hover {
    color: #000;
    background-color: #999;
    }
ul.nav {
    width: 100%;
    margin: 2% 0 0 0;
    list-style: none;
    float: right;
    }
ul.nav li {
    float: left;
    margin: 0 3%;
}
ul.nav li a {
    font-size: 1.5em;
    color: #CCC;
    display: block;
    text-decoration: none;
    }
ul.nav li a:hover{
    color:#000;
    }
William Whitworth
William Whitworth
6,117 Points
William Whitworth
William Whitworth
6,117 Points

It's possible that your problem could be with:

.img {
max-width: 100%;
}

You've defined a width for your images in HTML but I don't know what the particular grid block can handle, if your image width is 272px and the grid width is only 200px it will break the design. It might work if you use:

.img {
width: 100%;
}

Setting width to 100% will fill the grid and the browser will automatically define the height based on the image. 

...but honestly I'd need more information about the grid, I'm not entirely sure what's breaking. It's a tall skinny image, so if it is breaking vertically, you'd have to go with a smaller image or try another solution - but I'd need more information to explain.