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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Posted by Tian Siang Ong
Tian Siang Ong
5,911 Points

My photos in the main page doesnt strink when i minimised the browser size. I dont quite understand why

My photos in the main page doesnt strink when i minimised the browser size. I dont quite understand why

/****************************************************** GENERAL ******************************************************/

body { font-family: 'Open Sans', sans-serif; }

wrapper{

max-width: 840px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0;

}

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Danny | Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Danny</h1> <h2>Web Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id=""> <li> <a href="img/nick.jpg"> <img src="img/dan.jpg.JPG" alt=""> <p>Danny Ong</p> </a>
</li> <li> <a href="img/numers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Playing with blending mode in photoshop</p> </a>
</li> <li> <a href="img/numers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Randomness</p> </a>
</li> <li> <a href="img/numers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Test images</p> </a>
</li> </ul> </section> <footer> <a href="https://twitter.com/dan0ts"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social icon"></a> <a href="https://www.facebook.com/danots"><img src="img/facebook.png" alt="Facebook Logo" class="social icon"></a> <p>Ā© 2014 Danny Ong.</p> </footer> </div>
</body>
</html>

Ethan Ede
Ethan Ede
11,575 Points
Ethan Ede
Ethan Ede
11,575 Points

I'm assuming you pasted the CSS from your external style sheet above the HTML. I'm not able to see the actual CSS file as it is not linked.

Based on what I can see, it appears that you need to add a "#" before the wrapper selector as it is an ID. Without it, the max-width percentage for the image references the page vs. the parent div, in this case.

Hard to spot these things, can be frustrating sometimes! Code on, Tian!

#wrapper {
max width: 840px;
margin: 0 auto;
padding: 0.5%;
}