Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Help

I must have messed something up but can't figure out where exactly. I am supposed to be designing the portfolio for the mobile site and my images haven't resized and they are just about on top of each other.

Also my footer is no longer my footer but almost near the top of my page.

Can anyone point me in the right direction?

Didn't mean to post this twice. I saw other posts with individuals linking their code to the post and can't figure out how to do that either. Sorry. What can I do to display the code without copy and pasting it here?

7 Answers

Ah now I see it. In order to fix the footer issue you might have seen the tutorial (its okay if you haven't) over blocks. The reason why the footer keeps showing up on the right is because the "elements" are set to clear:inline by default. (Inline means that the browser tries to cram the element on the same line).

In order to fix the footer, just add clear:both to your footer section.. making it this: footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

The "clear:both" makes the browser make element "footer" have its own separate line with nothing on either end. Nick does a (much) better job of explaining it than me, but that should fix your footer issue.

Hey AJ,

any chance you would be able to post your css file here ?

Is there an easier way to post it without me copy and pasting it here? Otherwise I can do that.

I am not sure, but I would be more than happy to try and figure it out

/************************** 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: 25%; 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; }

Hmm off the bat I noticed there were no "media queries" to change the CSS when the display screen is mobile sized, did you get to that part of the tutorial yet?

I did not, no. I know it's extremely difficult to try to troubleshoot an issue without actually seeing everything involved. We haven't gotten to the "media queries" part yet but when Nick goes to preview his page, the images look more organized, they fit the page and the footer is where it should be.

I will try to go back one step at a time and see where the issue is. I'm also trying to figure out CodePen so I can post both the HTML and CSS code here so it is easier to view.

Thanks for your time.

No problem, I guarantee you'll get it. As a trick I do, I download the project files (under the video) to see if I had any issues. The project files underneath are meant to bring you up to speed with the start of the video.

Good luck!

Thanks for the tip Alex. I'm going to start doing that from now on.

I applied both code's to CodePen. You should be able to check it out here if you'd like.

http://codepen.io/sicignanoaj/pen/yuzwm?editors=110

I think I got it

Awesome. That fixed my footer issue. Now if I can only figure out what's going on with my images. Thanks again.