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

HTML How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Sebastian Eguez
Sebastian Eguez
8,248 Points
Posted by Sebastian Eguez
Sebastian Eguez
8,248 Points

My nav a {} is not working

https://w.trhou.se/y0j1tldv3j

nav a {
    font-weight: 100000000;
    padding: 1000000px 10px;
}

My nav a {} remains the same despite my changes.

Also, in the second row of images, the second image's background is larger (probably because the are 2 lines of words versus 1 on the image to the left).

How can I fix that?

Thank you! : )

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I forked your workspace and took a look. The problem here is that you're inputting invalid numbers for the font-weight and the padding. Font-weight can only go up to a maximum of 900. As noted by the MDN:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

If I do this I see an immediate change in your page after refreshing:

nav a {
    font-weight: 500;
    padding: 100px;
}

Try this and refresh the page. If you still don't see a change, try clearing your browser cache. There is the off chance that it's loading in cached data instead of your newly edited data. :thumbsup:

Sebastian Eguez
Sebastian Eguez
8,248 Points
Sebastian Eguez
Sebastian Eguez
8,248 Points

Fixed. You rock! : )

Do you have any idea regarding my second question?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

It could be. You could try something really dramatic. Take it down to 100 then up again to 900 and see if you see a difference :smiley: However, some google fonts include specific weights. Indie flower is only available in weight 400. So I feel like that may have something to do with it.

You could try this one just to see:

<link href='https://fonts.googleapis.com/css?family=Economica:400,700' rel='stylesheet' type='text/css'>

Note that this has settings for 400 (which is normal weight) and 700.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Oh, right! Your second question. My advice is to continue on the track you're on. There are some fairly advanced CSS techniques with floats and flexboxes etc which I'm fairly sure Nick and Guil can explain much better than I can :smiley:

Sebastian Eguez
Sebastian Eguez
8,248 Points
Sebastian Eguez
Sebastian Eguez
8,248 Points

Yes. That was the case. The change was barely perceptible. Are you answering/coding from a cell phone? How are you typing your emojis?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Oh no no no! I'm on a computer. There's no way I could type this quickly on a phone or tablet LOL. Here's a markdown cheatsheet on how to do all sorts of emojis! :dizzy:

http://www.emoji-cheat-sheet.com/

Sebastian Eguez
Sebastian Eguez
8,248 Points
Sebastian Eguez
Sebastian Eguez
8,248 Points

Do you type with all 10 fingers? :smirk: