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 Polish the Navigation and Footer

Caroline Jin
Caroline Jin
970 Points

Resizing 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

Hi 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:

main.css
/*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

I 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
Caroline Jin
970 Points

Hey 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:)

Hi 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
Caroline Jin
970 Points

Thank you for the reply. Yes, my image folder is "Img". My preview link is here: http://port-80-1u5ei4yrrg.treehouse-app.com/index.html

I 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
Caroline Jin
970 Points

Hey Robert, can I ask two more questions?

  1. 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
Caroline Jin
970 Points

Hi 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:)