Images on page not changing to fluid design

Question

Hello! I'm having some issues with the beginning coding with fluid designs. I've retraced my steps and completely redone my HTML & CSS a few times, but for some reason I keep ending at the same place. My text is fluid, but my images are fixed and also borders of images and throwing off the entire page. I've converted everything from px to %, and would have hoped to figure this out myself - but after 2 days of troubleshooting would love some advice!!

I will paste my code also. I apologize the code looks strange and cut up once pasted...

Answer 1 · 2013-09-19T14:58:38Z

September 19, 2013 2:58pm

<!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 rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>

</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="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 omega"> <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>. Its 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="Jalapeno So Spicy">
</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 &amp; 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-555-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 &amp; 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>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
</div>

</div> </body> </html>

/* Width: 100% /*1000px/ # Columns : 12 Column width: 6.5% /*65px/ Gutter : 2% /*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%; } /*405/ .grid_6 { width: 49%; } /*490/ .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 { margin: 0 2% 1% 0; float: left; display: block; }

.alpha{margin-left:0;} .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}

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

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

h1 { font-size: 1.750em; font-weight: 100; letter-spacing: -1.5px; }

h2 { font-weight: 100; font-size: 1.500em; color: #b4c34f; }

h3 { font-weight: 100; font-size: 1.125em; color: #ed6c85; }

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

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

.btn-small { padding: 10px 25px; margin: 50px 0; color: #faf3bc; font-size: .75em; background: #b22316 url('texture.png') no-repeat right bottom; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; text-transform: uppercase; }

.btn-small:hover {

background-color: #c62718;

}

.submit-btn { padding: 10px 25px; margin: 20px 0 50px 0; color: #faf3bc; font-family: 'Nunito', sans-serif; border: 0; font-weight: 100; font-size: .75em; background: #b22316 url('texture.png') no-repeat right top;; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; text-transform: uppercase; }

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

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

ul.nav li.last { margin: 0; padding: 10px 25px; color: #faf3bc; font-family: 'Nunito', sans-serif; border: 0; font-weight: 100; font-size: .75em; background: #b22316 url('texture.png') no-repeat right top;; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; text-transform: uppercase; }

ul.nav li.last:hover { background-color: #c62718; }

ul.nav li a { color: #faf3bc; display: block; text-decoration: none; }

intro {

margin: 50px 0 75px 0;

}

new-cupcakes img {

border: 8px solid #faf3bc;
margin: 0 0 20px 0;

}

popular-cupcakes img {

border: 8px solid #faf3bc;

}

featured-cupcake img {

border: 8px solid #faf3bc;

}

contact span{

color: #b22316;
font-weight: 600;

}

copyright {

border-top: 8px solid #2a0400;
padding: 10px 0;
margin: 15px 0;
text-align: center;

}

Answer 2 · 2013-09-19T21:33:57Z

September 19, 2013 9:33pm

Hey becca

Are you downloading each project file for each different project??

I have just realised that there are different files for each project or stage.

I am about to restart the fluid foundation with the new files and see what happens... i noticed right away that the css file is completely different to what the "build a simple website" project is.

Answer 3 · 2013-09-19T22:01:33Z

September 19, 2013 10:01pm

hmmm.... this is all getting a bit confusing. I did what you said and yes thats all fine and finished the "build a simple website"

I have done the intro to responsive website and now doing the "fluid foundation" again. wish me luck

Answer 4 · 2013-09-19T22:10:29Z

September 19, 2013 10:10pm

Good luck I'm sure it will work this time!

Welcome to the Treehouse Community

Looking to learn something new?

Becca Fraiman

Becca Fraiman

Images on page not changing to fluid design

4 Answers

Becca Fraiman

Becca Fraiman

intro {

new-cupcakes img {

popular-cupcakes img {

featured-cupcake img {

contact span{

copyright {

Chris Mitchell

Chris Mitchell

Becca Fraiman

Becca Fraiman

Chris Mitchell

Chris Mitchell

Becca Fraiman

Becca Fraiman

Chris Mitchell

Chris Mitchell