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

HTML Build a Responsive Website Creating a Fluid Foundation Scalable Images

Posted by randy raber
randy raber
2,063 Points

Why are my images not scalling

why are my images under big and tall not scalling?

stylesheet

body {
    font-family: 'Questrial', sans-serif;

    background:url('img/bg.jpg') no-repeat;
    background-attachment:fixed;

}
.container{
  background:pink;


  padding: 2%;

}
a {
    text-decoration:none;
}
img {
    max-width:100%;
}
h1{
    font-size:1.750em;
    letter-spacing: -1.5px;
}
h2 {
    color:brown;
}
.btn{
    color:red;
    background:white;
    border: 1px solid purple;
    padding:15px 30px;
    margin:4% 0;
    border-radius:30px;
    text-transform:uppercase;
}

.btn:hover{
    background:lightpink;
}

ul.nav {

    margin: 5% 0 0 0;
    list-style:none;
    float:right;
}

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

#featured-frame img{
    border:5px solid purple;
}
#new-frames img {
    border:5px solid purple;
    margin-right: 1.5%;
}

#bigandtall img {
    box-sizing:border-box;
    border:5px solid purple;
    margin: 1.5% 1.5% 0 0;
}

#why-us {
margin: 7.5% 2% 0 0;
}

#why-us h2, #contact h2{
    text-align: center;
}
#copyright {
    border-top : .5% solid purple;
    text-align: center;
}

HTML

<!DOCTYPE HTML>

<html>

  <head>
    <title>Tucson Futons</title>
    <link rel="stylesheet" href="normalize.css" type="text/css" media="screen">
     <link rel="stylesheet" href="grid.css" type="text/css" media="screen">
     <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="container clearfix">
      <div id="header" class="grid_4 ">
        <img src="img/logo.jpg" alt="Tucson Futons">
      </div>
      <div class="grid_8 omega">
        <ul class="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div id="intro" class="grid_8">
        <h1>We build quality futon frames, the best and strongest you can buy. We have ready-built frames in stock for purchase or we can custom build a                    
            frame for you. We assist our customers on color and design. GREAT FOR ANY 
            ROOM IN   YOUR HOUSE. 
        </h1>
        <p><a href="#" class="btn">Browse Our Futons</a></p>
      </div>
      <div class="grid_4 omega">
        <img src="img/store.png">
      </div>
      <div id="featured-frame" class="grid_4">
        <h2>Featured Frame</h2>
        <p>This is the featured frame of the month.</p>
       <img src="img/frame2.jpg">
      </div>

      <div id="new-frames" class="grid_4 ">
        <h2>Recently Crafted</h2>
        <p> These are the newest additions to the store</p>
        <img src="img/frame1.JPG">

      </div>

      <div id="bigandtall" class="grid_7">
        <h2>Big and Tall Frames</h2>
        <h3>Its hard to find a sturdy frame for big and tall people</h3>
        <img src="img/bigandtall1.JPG">
        <img src="img/bigandtall2.jpg">
        <p> Our frames can withstand larger and taller people, even 7ft tall basketball players. 
            We build the only futon sofa frame on the market for big and tall people. 
            Our Solid wood frames are strong and sturdy.
            All sizes Twin, Full, Queen, King Size
        </p>
      </div>

      <div id="why-us"  class="grid_4">
        <h2>Why tucson futons</h2>
        <p>We take care of our customers and take pride in the frames we build.</p>
        <p><a href="#" class="btn-small">Read More</a></p>
       </div>
      <div id="contact" class="grid_4 omega">
      <h2>Want a handmade futon</h2>
      <p>Call us: 1-555-TUCSON-FUTONS<br>
        Email us: <a href="#">tucsonfutons@tucsonfutons.com</a>
      </p>
      </div>
      <div id="copyright" class="grid_12">
      <p>Copyright &copy; Tucson Futons, 2012. All rights reserved.</p>
      </div>

    </div>



  </body>

</html>
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hey i didn't read that css but i an tell you if yo want to scale your images, instead of putting something like height 200px , put e.g. 10% if yo know what i mean .

For better help put you CSS in order so what i mean write ''' css . same like HTML but instead HTML change it to CSS. Or put it on codepen.io .

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Randy,

I've edited your code so it appears correct in your post.

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code

5 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Randy,

Thanks for posting your code, it goes without saying that it would be the first thing we would ask for in order to help you, thanks again.

Could you please give a more detailed description of your problem, for example are your images too small and you want them to scale up when you resize your browser? Or is the opposite true?
Have you viewed your site in different browsers to see if the problem is still there?

randy raber
randy raber
2,063 Points
randy raber
randy raber
2,063 Points

I am trying to have them scale down when I resize my browser and vise versa i have not tried other browsers working in chrome at the moment also using the grid that the teacher provided for the layout but having trouble with some of the images not all scalling responsively any help help would be great. thank you for the code correction will do better next time.

randy raber
randy raber
2,063 Points
randy raber
randy raber
2,063 Points

Also can I use the grid.css for future projects or is it simply created for the smells like bakin layout becuz i am having a hard time with scalling images in a div element that is not grid_4(32%) example i have two pictures in a div element with class grid_8(66%)which does not scale but if i change to grid_4(32%) it scales just fine but is stacked on top of each other.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Randy,

Try setting a max-width: 100%; to your images.
I usually set this like so.

img {
max-width: 100%;
}

But it will work just as good if you set It within your #bigandtall

Bill Hinostroza
Bill Hinostroza
19,273 Points
Bill Hinostroza
Bill Hinostroza
19,273 Points

He already set max-width: 100% on his img tag.

I didn't realize it until after i posted my answer lol

randy raber
randy raber
2,063 Points
randy raber
randy raber
2,063 Points

Thanks for responding still havent been able to figure it out but i will continue to try im going to try and set the layout with the grid.css and see if that works as it might just be a problem with the grid and my images sizes but i dont know .