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

General Discussion

Oliver Sewell
Oliver Sewell
16,425 Points
Posted by Oliver Sewell
Oliver Sewell
16,425 Points

Does anyone know why my image wont stay the same size when im shrinking the window 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title> Website </title>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />
</head>

<body>
<div id="wrapper">
    <header>
    <img class="logo" src="images/logo.jpg"/>
        <nav>
            <ul>
                <li><a href="#"> Home </a></li>
                <li><a href="#">  About </a></li>
                <li><a href="#">  Product</a> </li>
                <li><a href="#">  Contact </a></li>
        </nav>
    </header>

    <section id ="feature">

        <h1 class="text">-- Welcome --<h1>

    </section>

body {
    background-color: lightgrey;
    margin: 0 auto;
    max-width: 960px;
}


section#feature {
    clear: both;
    width: 100%;
    height: 300px;
    background: url('../images/banner.jpg') no-repeat;
    box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
    -o-box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
    border-bottom: 1px solid white;
    margin-bottom: 1em;
    color: white;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    -moz-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    -webkit-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    -o-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
section#feature h1 {
    font-size: 3.5em;
    font-weight: bold;
    padding-top: 1.8em;
    font-family: Georgia
}
rydavim
rydavim
18,814 Points

When posting code you can add three backticks (```) which are located on the tilda ~ key before and after your code block in order to get some nice formatting. You can add the language immediately following the opening backticks in order to get syntax highlighting.

I've done this already to your original post, but you can use this markup in the future when posting questions! Pretty neat, huh? :)

5 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

When I used a placeholder image from lorempixel for the logo, the image didn't change sizes. However, I noticed you were missing some closing tags in your posted html. It's possible that these may be causing your issue. You can use the comments in the code below to double check and make sure you've closed all your open tags.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Forum Help</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="wrapper">
      <header>
        <!-- When I used a placeholder img from lorem pixel, it remained the same size. -->
        <img class="logo" src="http://lorempixel.com/400/200/"/>
        <nav>
          <ul>
            <li><a href="#"> Home </a></li>
            <li><a href="#">  About </a></li>
            <li><a href="#">  Product</a> </li>
            <li><a href="#">  Contact </a></li>
          </ul> <!-- Make sure you close your ul, like this! -->
        </nav>
      </header>

      <section id="feature"> <!-- Make sure there's no space after id in your id assignment, like this! -->
        <h1 class="text">-- Welcome --</h1> <!-- Make sure you close your h1 with a backslash, like this! -->
      </section>
    </div> <!-- Make sure you close your div tag, like this! -->
  </body>
</html>

Edit - If you're still having trouble after double checking for closing tags, could you post a workspace snapshot? That way we can see your file structure, and use the same images you're using.

Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points

Thankyou for the reply rydavim , i cant believe i missed some of those closing tags , this is a project im trying to complete in notepad as i paused my account so i could practice some stuff. unfortunately its not staying the same size still when im shrinking the browser .

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title> Website </title>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />
</head>

<body>
<div id="wrapper">
    <header>
    <img class="logo" src="images/logo.jpg"/>
        <nav>
            <ul>
                <li><a href="#"> Home </a></li>
                <li><a href="#">  About </a></li>
                <li><a href="#">  Product</a> </li>
                <li><a href="#">  Contact </a></li>
            </ul>
        </nav>
    </header>

    <section id ="feature">

        <h1 class="text">-- Welcome --<h1>

    </section>


    <section>
        <div class="columns">
        <div id="column1">
        <img class="sock" src="images/sock.jpg"/>
            <h3> Column 1 </h3>
            <p>Lorem Ipsum enim aliquam elementum
            facilisis adipiscing, aenean etiam Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic</p>
            </div>
        <div id="column2">
        <img class="sock" src="images/sock.jpg"/>
            <h3> Column 2 </h3>
            <p>Lorem Ipsum enim aliquam elementum
            facilisis adipiscing, aenean etiam Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic</p>
        </div>

        <div id="column3">
        <img class="sock" src="images/sock.jpg"/>
            <h3> Column 3 </h3>
            <p>Lorem Ipsum enim aliquam elementum
            facilisis adipiscing, aenean etiam Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic</p>
        <div>
        </div>
    </section>

                    <!-- newsletter form sign up -->
                    <section>
                    <form id="newsletter" action="#">
                        <h3>Newsletter</h3>
                        <p>Sign up for news and special offers delivered to your inbox monthly.</p>
                        <label>Name: </label>
                        <input type="text" placeholder="Your Name" />

                        <label>Email: </label>
                        <input type="email" placeholder="Your Email Address" />

                        <input class="button" id="submit-newsletter" type="submit" value="Sign Up" /> <!-- sign up button -->
                    </form>
                </section>

        <footer>
        <img class="small" src="images/smalllogo.jpg"/>
         <p class="copy"><small>&Copy Oliver Sewell 2015</small></p>
        </footer>
    </div>
</body>

</html>

body {
    background-color: lightgrey;
    margin: 0 auto;
    max-width: 960px;
}


section#feature {
    clear: both;
    width: 100%;
    height: 300px;
    background: url('../images/banner.jpg') no-repeat;
    box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
    -o-box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
    border-bottom: 1px solid white;
    margin-bottom: 1em;
    color: white;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    -moz-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    -webkit-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    -o-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
section#feature h1 {
    font-size: 3.5em;
    font-weight: bold;
    padding-top: 1.8em;
    font-family: Georgia
}



h3 {
    color: grey;
    font-family: tahoma;
    font-style: bold;
}



.columns{
-webkit-column-count: 3;
-webkit-column-gap: 20px; 
-webkit-column-rule: 0px dotted black;
-moz-column-count: 3;
-moz-column-gap: 10px;  
-moz-column-rule: 0px dotted black;
column-count: 3;
column-gap: 10px; 
column-rule: 0px dotted black;
margin: 5px auto;
width: 100%;
text-align: center;

}
#column1 {
    background-color: lightblue;
}

#column2 {
    background-color: #C2E6F2;
}

#column3 {
    background-color: #AFD6E3;
}
.sock {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    border: blue solid 5px;
}

.logo {
    float: left;
    margin-top: 50px;
}

nav {
    margin-top: 2em;
    float: right;
}

ul {
    border-radius: 20px;


}
ul li {
    display: inline-block;
    margin: 10px;
    background-color: lightblue;
    padding: 10px;

}

ul li a {
    text-decoration: none;
    color: white;
}

li:hover {
    background-color:blue;
}


p {
    font-style: tahoma;
    font-size: 12px;
}

#newsletter {
    background-color: lightblue;
    padding: 3%;
    width: 94%;

}

footer {
    padding: 2px;
    background-color: grey;
    border-top: blue solid 2px;
}

.small {
    float: right;
    margin: 0 auto;
}

.copy {
    clear: right;
    color: white;
    text-align: center;
}
rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Notepad is definitely going to make it harder to catch closing tags and typos. I fixed a couple closing tags and typos in your html, and the placeholder images I'm using are not resizing at all in the browser.

Without seeing your actual file structure, images, and code it's going to be really hard to figure out where the problem is.

I'm not sure if you can see this, but here is a snapshot of the workspace I'm using to look at and fix your code. Alternatively, I'll post the files below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Forum Help</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="wrapper">
      <header>
        <img class="logo" src="http://lorempixel.com/400/200/"/>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Product</a> </li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>

      <section id="feature"> <!-- Make sure there's no space in between id and =! -->
        <h1 class="text">-- Welcome --</h1> <!-- Make sure you've closed the h1 properly! -->
      </section>


      <section>
        <div class="columns">
          <div id="column1">
            <img class="sock" src="http://lorempixel.com/400/200/"/>
            <h3> Column 1 </h3>
            <p>Lorem Ipsum enim aliquam elementum
            facilisis adipiscing, aenean etiam Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic</p>
          </div>

          <div id="column2">
            <img class="sock" src="http://lorempixel.com/400/200/"/>
            <h3> Column 2 </h3>
            <p>Lorem Ipsum enim aliquam elementum
            facilisis adipiscing, aenean etiam Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic</p>
          </div>

          <div id="column3">
            <img class="sock" src="http://lorempixel.com/400/200/"/>
            <h3> Column 3 </h3>
            <p>Lorem Ipsum enim aliquam elementum
            facilisis adipiscing, aenean etiam Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic</p>
          </div>
        </div>
      </section>

      <!-- newsletter form sign up -->
      <section>
        <form id="newsletter" action="#">
          <h3>Newsletter</h3>
          <p>Sign up for news and special offers delivered to your inbox monthly.</p>
          <label>Name: </label>
          <input type="text" placeholder="Your Name" />

          <label>Email: </label>
          <input type="email" placeholder="Your Email Address" />

          <input class="button" id="submit-newsletter" type="submit" value="Sign Up" /> <!-- sign up button -->
        </form>
      </section>

      <footer>
        <img class="small" src="http://lorempixel.com/400/200/"/>
        <p class="copy"><small>&copy; Oliver Sewell 2015</small></p> <!-- Make sure you've got a ; to end the copy! -->
      </footer>
    </div>
  </body>
</html>

body {
  background-color: lightgrey;
  margin: 0 auto;
  max-width: 960px;
}

section#feature {
  clear: both;
  width: 100%;
  height: 300px;
  background: url('../images/banner.jpg') no-repeat;
  box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
  -moz-box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
  -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
  -o-box-shadow: 0 0 15px rgba(0,0,0,0.75) inset;
  border-bottom: 1px solid white;
  margin-bottom: 1em;
  color: white;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  -moz-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  -webkit-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  -o-text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

section#feature h1 {
  font-size: 3.5em;
  font-weight: bold;
  padding-top: 1.8em;
  font-family: Georgia
}

h3 {
  color: grey;
  font-family: tahoma;
  font-style: bold;
}

.columns {
  -webkit-column-count: 3;
  -webkit-column-gap: 20px; 
  -webkit-column-rule: 0px dotted black;
  -moz-column-count: 3;
  -moz-column-gap: 10px;  
  -moz-column-rule: 0px dotted black;
  column-count: 3;
  column-gap: 10px; 
  column-rule: 0px dotted black;
  margin: 5px auto;
  width: 100%;
  text-align: center;
}

#column1 {
  background-color: lightblue;
}

#column2 {
  background-color: #C2E6F2;
}

#column3 {
  background-color: #AFD6E3;
}

.sock {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border: blue solid 5px;
}

.logo {
  float: left;
  margin-top: 50px;
}

nav {
  margin-top: 2em;
  float: right;
}

ul {
  border-radius: 20px;
}

ul li {
  display: inline-block;
  margin: 10px;
  background-color: lightblue;
  padding: 10px;
}

ul li a {
  text-decoration: none;
  color: white;
}

li:hover {
  background-color:blue;
}


p {
  font-style: tahoma;
  font-size: 12px;
}

#newsletter {
  background-color: lightblue;
  padding: 3%;
  width: 94%;
}

footer {
  padding: 2px;
  background-color: grey;
  border-top: blue solid 2px;
}

.small {
  float: right;
  margin: 0 auto;
}

.copy {
  clear: right;
  color: white;
  text-align: center;
}
Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points

Thankyou for the reply ! unfortunately its still not working :/ is their anything wrong with my css? i thought the width: 100% would of worked

rydavim
rydavim
18,814 Points

I didn't find anything wrong with your CSS. This makes me think that there's something wonky in your code or files that we're just not seeing here.

Notepad is probably not the best solution for working locally. Maybe try something like Sublime Text? I don't personally use this, but it's highly recommend by lots of people, and would at least help you see errors like closing tags or typos.

Keep in mind that width: 100% means 100% of the parent element and not necessarily 100% of the page or window.

Sorry! I'm just not seeing the same behavior you are, so it's difficult to figure out what the differences are. :(

Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points

It's okay thankyou for trying to help anyway dude! I appreciate it