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

Posted by AJ Sicignano
AJ Sicignano
823 Points

Gallery/Image Issue

I'm not sure where I went wrong with the code. I've quadrupled checked mine against Nick's in the video but my gallery images are not spaced apart and are still too big for a mobile device.

Any help? Could it be my browsers window?

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

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

wrapper {

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

a { text-decoration: none; }

image { max-width: 100%; }

/************************** HEADING ***************************/

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Fjalla One', sans-serif; margin: 15px 0px; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/************************** NAVIGATION ***************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

/************************** FOOTER ***************************/

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }

/************************** PAGE: PORTFOLIO ***************************/

gallery {

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

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

/************************** COLORS ***************************/

/* site body */ body { background-color: #fff; color: #999; }

/* green header */ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile devices */ nav { background: #599a68; }

/* logo text*/ h1, h2 { color: #fff; }

/* nav link color */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

AJ Sicignano
AJ Sicignano
823 Points

Just noticed my footer is not even at the bottom of the page anymore but near the top hovering inside one of my gallery images. I have no idea what I did here.

Any suggestions/comments to push me in the right direction is appreciated.

3 Answers

Scott Moore
Scott Moore
4,050 Points
Scott Moore
Scott Moore
4,050 Points

Just curious. The code you have on the screen does not have a period in front of the selector. Are you doing .gallery to identify the class?

Shane Meikle
Shane Meikle
13,188 Points
Shane Meikle
Shane Meikle
13,188 Points

First off, it doesn't appear that you have designated what those selectors are in terms of class/id. (ie. #Wrapper or .Wrapper)

Secondly, for the footer, you could try:

#Footer {
clear: both;
}

or

.Footer {
clear:both;
}

depending on your ID/Class decision.

AJ Sicignano
AJ Sicignano
823 Points
AJ Sicignano
AJ Sicignano
823 Points

Thank you guys. I guess I just overlooked it. Being new to this, I'm finding it incredible that missing a simple step like that can throw you off completely.

Thanks again Shane & Scott.