Tribute Page - User Story #8 error

HTML-CSS
#1

User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

I just started my coding journey and am attempting to complete the first first assignment. I am struggling on the story listed above.

I’m just trying to pass the tests before I go back and try to style the document to my liking, I’ve gone back in the assignments and can’t seem to figure out how to progress.

#2

ounce you run the tests click on the red button that says passed which will bring up a list of requirements. Read further down from the initial numbered red to get further details on requirements.
Hope this helps.
like <main id ="main"> and what not. :+1:

also the responsive img try to add a display: block or flex in there some where to see if that helps.

#3

I have ran the test and looked at the error and see this:

#Layout
1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Try using the "max-width" style property : expected 'none' to not equal 'none'
AssertionError: Try using the "max-width" style property : expected 'none' to not equal 'none'
    at Proxy.c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:1889)
    at Proxy.u (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:431:130)
    at Function.n.notStrictEqual (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:736)
    at n.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:608:102269)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:259477
    at ny.Tg.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:259772)
    at r.Qg.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:274680)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:275616
    at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:274033)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:274103

I’m not really sure what to make of this.

#5

I think there is some confusion, my issue isn’t with #1 it’s with #8.

#8

@Delmorius, when a test fails, click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The first failing message says

The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Try using the "max-width" style property : expected 'none' to not equal 'none'
AssertionError: Try using the "max-width" style property : expected 'none' to not equal 'none'

Do you now understand what the test is looking for?

Something you need to do immediately, get rid of the style tags in codepen’s CSS editor. That tag is for HTML only.
Codepen’s CSS editor is like having an external stylesheet.
Leaving the style tags in there will cause problems…by that I mean things will not work the way they should.

#9

This is really helpful, it turns out that the style tags I placed were the issue all along. I didn’t realize they were for HTML only I must have misunderstand that during the lessons.

Thanks for your help! Looking forward to learning more :smiley:

#10

Good job @Delmorius.

You would only use the style tags in the head element of your HTML page when doing internal styling. It’s better to use external styling.

1 Like