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

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Josh Baruch
Josh Baruch
806 Points

Images are staying in one column and not reformatting with the browser.

I'm having trouble with my code. When I input those gallery rules, my images just squeeze together, instead of shrinking with the browser. HELP!

5 Answers

David Curtis
David Curtis
11,301 Points

Can you post your code so we can have a look? Thanks (not sure if my previous answer worked for some reason...)

Josh Baruch
Josh Baruch
806 Points

/******************** SITE WIDE ********************/

a {text-decoration:none;}

img { max-width=100%; }

body { font-family:'Gochi Hand', cursive; }

/WRAPPER IS SECTIONS AND FOOTER/

wrapper {

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

/LOGO REFERS TO H1, H2/

logo {

text-align:center; margin: 0; color:#fff; }

H1 { font-family: 'Londrina Outline', cursive; margin: 15px 0; font-size: 4em; font-weight:400; line-height:1em; color:#ffcc00 }

H2 { font-family: 'Londrina Outline', cursive; font-size: 2em; font-weight:normal; line-height: 1em; margin:0 0 0; }

nav { font-family: 'Gochi Hand', cursive; font-size: 1.5em; font-weight:bold

}

/Header Color/ header { background:#6a47b3; border-color:#599a68; }

/Navigation Background/ nav { background-color:#599a68; }

/Navigation Links/ nav a, nav a:visited, { color:#cc9a68; }

/Navigation Hover/ nav a.selected, nav a:hover { color:#cc9a68; }

/site body/ section { background-color:#fff; color:#9a2; }

/Gallery Formatting--Columns/

gallery {

margin:0; padding:0; list-style:none; }

gallery li {

float:none; width:45%; margin:2.5%; background-color:#f5f5f5; color:#bdb5c6; }

David Curtis
David Curtis
11,301 Points

You have this: img { max-width=100%; }

Try this: img { max-width: 100%; }

Please let me know if that works!

Josh Baruch
Josh Baruch
806 Points

I had to read your post like 5 times to see the difference. It worked! Its crazy that it makes a difference. I'm new to code so I didn't realize that kind of thing made a difference. Thank you so much!

David Curtis
David Curtis
11,301 Points

Haha - no problem! As you continue coding, you will see that this happens all the time. A missing semicolon, etc., can gimp your entire program. Glad I could help!