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
Chris Mitchell
12,719 PointsChanged grid.css and images have been pushed out
In the Bakin website fluid videos, I made changes from px-% but i have now ended up with my 2 floated-right images forced below the featured image. I am almost sure it has something to do with my html or my grid.css because I have worked backwards through my changes and when I change all the grids to %, its that moment when I end up with my error.
Hope someone can help me before i scratch all my hair off my head ty
I shall post my html and grid.css below: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' 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:400,300,700' 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="img/logo.gif" alt="Smells Like Bakin'">
</div>
<div class="grid_8 omega">
<ul class="main-nav">
<li><a href="#">About</a></li>
<li><a href="#">Cupcakes & 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 unexpected flavors that melt together to create ironically delicious desserts. </h1>
<p><a href="#" class="btn">Browse Our Cupcakes</a></p>
</div>
<div class="grid_3">
<img src="img/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="#">Avocado Chocolate Cupcake</a>. It's strange combo of flavors will kick your taste buds into fiesta mode!</p>
<img src="img/featured-cupcake.jpg" alt="Avocado 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> and <a href="#">Jalapeño So Spicy</a>. </p>
<img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
<img src="img/new-cupcake-jalapeno.jpg" alt="Spicy Lime">
</div>
<div class="grid_7">
<h2>Inside the Kitchen</h2>
<p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison & Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck. </p>
<p><a href="#" class="btn-small">Read More</a></p>
</div>
<div class="grid_5 omega">
<h2>Get Bakin' with Us</h2>
<div id="contact">
<p>Call us: <span>1-800-CUP-CAKE</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com </a> </p>
</div>
<p>We announce all of our new flavors first through Facebook & Twitter, and even take requests!</p>
<a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
<a href="https://twitter.com/#!/SmellsLikeBakin"><img src="img/twitter.gif" alt="Twitter"></a>
</div>
<div id="copyright" class="grid_12">
<p>© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved</p>
</div>
</div><!--end of container -->
</body> </html> /* Width: 1000px # Columns : 12 Column width: 65px Gutter : 20px
To Convert to responsive design: make container 90% so theres that white padding to the sides no matter what device its viewed on. Then make sure it doesnt go bigger than original size...e.g this was 1000px: max-width 1000px */ /*Changing grid sections to ems= target/context=result: 915px/1000px =0.915% 91.5% */
.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%; } /1000px/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { /Changing margins to % is same as above using container as context (1000px)/ margin: 0 2% 1% 0; float: left; display: block; }
.alpha{margin-left:0px;} .omega{margin-right:0%;}
.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}
2 Answers
Becca Fraiman
3,202 PointsI'm having a very similar issue!! Just finished the fluid videos and all my text / images are pushing to the left. It looks like my margins are warping. I went through all the Code Pens, retraced steps, redid all my CSS & grid but still no luck. Hoping I could figure this out on my own and I'm sure it's something simple. I remember when it first shifted and I'm sure something I added is overriding everything else..
Treehouse - I'll paste my work as well. Appreciate your help! I always try to figure it out on my own if possible, but no luck this time. I just redid my grid & CSS, hopefully I didn't miss anything:
CSS
body { font-family: 'Nunito', sans-serif; font-size: 1.125em; color: #FAF3BC; background: #420600 url('img/bg-texture.jpg') repeat; }
a { color: #4FB69F; text-decoration: none; }
img, object { max-width: 100%; }
h1 { font-size: 1.750em; letter-spacing: -1.5px; }
h2 { font-size: 1.500em; color: #B4C34F; }
.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: 0 0 5% 0; }
new-cupcakes img {
border: 8px solid #FAF3BC; margin: 0 0 5% 0; }
featured-cupcake img {
border: 8px solid #FAF3BC; margin: 0 0 5% 0; }
copyright {
border-top: 8px solid #2A0400; padding: 2% 0; margin: 2% 0%; text-align: center; }
GRID
/* Width: 1000px # Columns : 12 Column width: 65px Gutter : 20px
*/ .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%; }
.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}
Becca Fraiman
3,202 PointsGood call, that's what I was doing as well. I figured should do it right from the beginning. I redid my CSS & grid, but something is still overiding and pushing my images..
Ok mine looks the same! Except the lower cupcakes are above/under each other instead of side by side. Also my About, Contact, etc. tabs are not properly aligned.
Chris Mitchell
12,719 PointsK, i will keep looking.... I cant give up lol but could possibly not even be us doing anything wrong
Becca Fraiman
3,202 PointsI'm sure someone from Treehouse will look at our code and realize right away, haha they're the best!
Chris Mitchell
12,719 PointsI may be getting close.... It could be something to do with the borders around the big featured image and the 2 smaller images??
Dont the borders take up space outside of the images? this then, would add more onto the sizes of the widths to them? so 8px border on each side = 16px x 2 = 32px in total added, and with the grid.css there was 20px only remaing????
Chris Mitchell
12,719 Pointsi think ive found the issue.... its in the grid.css file
original fixed width = .container---- width 1000px---- margin auto
when going to a fluid layout with grids 1-12 in % all is still ok but when i change the container to 90% thats when the images get pushed out .container ---- width 90% --- max-width 1000px --- margin auto
So now i need to try and figure out how to solve it... help anyone?
Becca Fraiman
3,202 PointsI agree, my text is fluid and shifts when I change the browser size - but my images are still fixed.. which also seems like maybe the margins or outside space is too large?? We'll get some help by tomorrow hopefully if we can't solve through it.
Becca Fraiman
3,202 PointsDid you find anything on this? I created a second folder and started complete from the beginning, haha wow. Now I'm having another issue with my tabs not floating right.. anyways let me know if you found a fix to the layout issue. It has to be something with the images pushing everything else out and not becoming fluid.
Chris Mitchell
12,719 PointsNot yet but i got sidetracked like yourself when i re started lol If you look at my other forum post you will see where the class .btn issue was figured out.
Back to the original images problem now so hopefully may sort it, but im sure it has something to do with the class.container when its width is changed to 90%
Becca Fraiman
3,202 PointsI figured mine out - basically I think what I did is began changing all of the margins/padding to percentages.. however I realized they only prompted us to change the ONE area on grid:
margin: 0 2% 1% 0; float: left; display: block;
When she said "keep this formula in mind while changing your other margins" I assumed we should go through and correct the rest. I think this is why my images were bumped down. I started everything from the beginning and didn't change any margins / padding, now mine is working! Maybe you did the same thing?
Chris Mitchell
12,719 Pointshaha yes.... i literally just started looking into the issue again and your right.... i opened my window to full size and boom, images all together!!
Thankyou for the post because i was just about to start scratching my head thinking how in the hell it happened.
Chris Mitchell
12,719 PointsChris Mitchell
12,719 PointsI am starting completely from scratch with a take-two folder to see if i can find where i went wrong, will update if i find it becca... this is my screenshot of the two smaller images being pushed down after i have changed grid.css to %
[IMG]http://i496.photobucket.com/albums/rr323/cjm08_bucket/snapzzz/bakin_error_zps23f81f07.jpg[/IMG]