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
AJ Sicignano
823 PointsHelp
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
Alex Cevallos
16,551 PointsAh 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.
Alex Cevallos
16,551 PointsHey AJ,
any chance you would be able to post your css file here ?
AJ Sicignano
823 PointsIs there an easier way to post it without me copy and pasting it here? Otherwise I can do that.
Alex Cevallos
16,551 PointsI am not sure, but I would be more than happy to try and figure it out
AJ Sicignano
823 Points/************************** 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; }
Alex Cevallos
16,551 PointsHmm 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?
AJ Sicignano
823 PointsI 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.
Alex Cevallos
16,551 PointsNo 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!
AJ Sicignano
823 PointsThanks 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.
Alex Cevallos
16,551 PointsI think I got it
AJ Sicignano
823 PointsAwesome. That fixed my footer issue. Now if I can only figure out what's going on with my images. Thanks again.