1 Simple Failure Yet Unable to Debug - Tribute Page

Code Feedback
1

Tell us what’s happening:
Any assistance is appreciated. After running the test, my tribute page has 9 passes and 1 failure. I am obviously overlooking something. Here is the following is the error:

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Your code so far
Unfortunately, I am unable to link my codepen. Apparently, I have to use freecodecamp more?

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:

2

@coderita
Just copy/paste the url of your codepen into the text.
Without it it’s difficult to help you.

3

I did but it wasn’t “allowed” until I “participate more”. I assume because I am new in the forum.

4

Oh, just reply to a few others, give some likes, etc. That’ll change just status.

1 Like
5

03%20AM
03%20AM861×336 18.6 KB

6

It’s just a rule to keep people from asking help without offering any. And without contributing to this forum.

I had no idea when I started here, and then I received all kind of badges because I replied to others, or shared interesting url’s and things like that. So I guess that’s how it works.

1 Like
7

Paste the URL in with spaces or just give us your Codepen username as we can look you up on there with that.

8

I’m sure it’s something simple I have overlooked. Any help is appreciated. Thank you :slight_smile:

1 Like
9

Your site works fine and looks great. But in the code it says

#img-div, img{
  max-width: none;
  height: auto;
  background-color: #006666;
}

It’s the “none” that doesn’t meet the standards. Replacing it with 100% is enough to solve the problem.

10

Thanks. I originally had the width at 100% but the test resulted with 1 failure. So I changed it to “none” as suggested in the test report but it still resulted in a failure. Hence me asking for help :frowning:

1 Like
11

Oh and thank you! Glad you like it :blush:

1 Like
12

Welcome to coding. You’ll spend many hours looking for this kind of small things, and typo’s or forgotten > ; or whatever.:grinning:

1 Like
13

Never mind! LOL! That did it. Not sure what I was thinking. I may have thought I had it. Thank you! :smile:

1 Like
14

Not bad. Good job.

  1. Personally, I would move the menu to the right, if you add the bootstrap flex helper class “justify-content-end” to the nav it should work.
<nav class="navbar navbar-dark justify-content-end">
</nav>
  1. I would increase the font size and maybe also center the nav links.
.nav-link  {
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
}
  1. Maybe space out the li’s a bit
li {
  margin-bottom: .5rem;
}