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
Caroline Jin
970 PointsResizing the icons on the footer
I wanted to resize the social icons on the footer, but they stayed the same
HTML: <footer> <a href="https://twitter.com/Caroline_Kim619"> <img src="Img/twitter-wrap.png" alt="twitter logo" class="social-icon"> </a> <a href="https://linkedin.com/in/carolinemkim/"> <img src="Img/linkedin.jpeg" alt="linkedin logo" class="social-icon"> </a>
CSS:
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
5 Answers
Robert Richey
Courses Plus Student 16,352 PointsHi Caroline,
As I'm going through the code, it's starting to feel harder to maintain as more code gets patched into it, whether to test or as a temporary fix. I highly recommend just deleting everything and starting over from scratch. This may not sound very appealing, but let me assure you, no one writes perfect code the first time. I'm always deleting files and re-writing it - it's important to not be afraid to let go and start over.
Try and use the same formatting that Nick uses - it will be easier for you to quickly skim your code, as well as being easier for others who are trying to help debug it.
With that said, here is what I found:
/*color for nav link*/
nav a, nav a:visited {color:#599a68;}
/* change this color to white, or #fff */
By default, you want these links to appear white, even if they've been visited, and to only change colors when hovered over or selected.
Also, I didn't see any problems with your photo in the about.html file. Can you describe what you're expecting to see vs. what you are seeing? I see a horizontally centered personal photo in the shape of a circle.
Best Regards
Robert Richey
Courses Plus Student 16,352 PointsHi Caroline,
Did you rename the image folder to Img? If not, in Workspaces, it should be named img. If this doesn't fix the problem, can I have you please post a link to the preview page from your workspace?
Caroline Jin
970 PointsThank you for the reply. Yes, my image folder is "Img". My preview link is here: http://port-80-1u5ei4yrrg.treehouse-app.com/index.html
Robert Richey
Courses Plus Student 16,352 PointsI believe I found the syntax error causing the problem.
footer {
font-size:0.75em;
text-align:center;
clear:both;
/*footer is not floating */
padding-top:50px;
color:#ccc} /* replace this } with a ; */
}
Please let me know if this helps. If not, I'll do a more thorough test.
Cheers
Caroline Jin
970 PointsHey Robert, can I ask two more questions?
- I got stuck in linking my about.html to CSS. It seems what I made changes for my profile picture didn't work at all on about page preview. It looks about.html didn't connect to main.css.
2.Also, my navigation headers(Portfolio, About, Contact) disappear when I don't click on them, they are supposed to be in white color.
My link for the preview page is http://port-80-1u5ei4yrrg.treehouse-app.com/about.html
Thanks!
Caroline Jin
970 PointsHi Robert,
Thanks for the answer! Yes, I figured I used two of "}" at the end! It works now, I just started the learning and I figured HTML really needs to be serious about every single details. Again,thanks for the help:)
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsI also want to add that I think you're doing great to get this far. Web development is not easy - it's a credit to Nick and Guil that they make it look so effortless. There's a lot to learn and this is a great community to reach out to whenever you need help.
Caroline Jin
970 PointsCaroline Jin
970 PointsHey Robert,
Thanks so much, the navigation problem is solved! And the picture is now has been updated, which was not before. I think the preview page sometimes doesnt apply the changes right away and I was frustrated thinking it was my coding problem.
Thanks for the kind words, that really encourage me. Yes I think I am at the beginning of learning and afraid of every single error. Your words really helps- that I should be brave enough to start over and code again. That might be also a way that I can learn better.
Best:)