Tribute Page making the image responsive

HTML-CSS
1

Hello, i have been working on the tribute page project for a few weeks now. I have passed 9 of the 10 tests however i have been unable to pass the test which requires me to make the image responsive. I have tried several solutions i have found online however, none so far have proven effective.

here is the link to my project:

2

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 full failing test messsage 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 understand what the test is looking for and why it’s failing?

On a side note;

  • Do not use style tags in codepen’s CSS editor. style tags are HTML tags and do not belong in a CSS stylesheet. They will cause problems.
  • Do not try and replicate the sample projects. They show just one way the project can be completed. The instructions say to make yours “functionally similar” and to “give it your own personal style”
3

Hello, i have been busy so i did not respond sooner. i have changed the topic of the tribute page.
I have also removed the style elements from the CSS.
The part of the error i do not understand is ''AssertionError: Try using the “max-width” style property : expected ‘none’ to not equal ‘none’. I simply do not know what this part of the error is telling me.
Here is a link to my codepen:

4

I’ll start with some other things for you to revisit first @LGH948. Then I’ll respond to your question.
The test script, with all tests passing, should be included when you submit your projects.
Your page passes 9/10 user stories. 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 specific questions on what you don’t understand. (I’ll answer at the end)

  • Run your HTML code through the W3C validator.
    There are HTML syntax/coding errors you should be aware of and address.
    Since copy/paste from codepen you can ignore the first warning and first two errors.
  • You have the following in the codepen’s CSS editor
<center>
  <img src='https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg'alt='image' height='150' width='200'>
</center>

This is HTML code and you would not put it into a CSS stylesheet
Secondly, the center element has been deprecated. You are learning HTML5.

Yes and you placed them incorrectly into the codepen’s HTML editor.
Get rid of the style tags and place the selector along with the property; value: pair into codepen’s CSS editor.

The full message reads

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'

What the test is looking for is the max-width property in the img selector in CSS.
“Expected 'none to not equal 'none” means it’s either not there or it’s not finding it.
In this case you have included it in the CSS stylesheet but because of the invalid HTML code in the CSS editor the valid img selector along with the valid property; value; pairs within that selector are not being seen.

When you remove that HTML code and run the tests again you’ll get a different error message.
Although the first line in the error message looks the same it is a different message so be sure to read the entire message.

  • I’ve notice quite a few typo’s in your HTML code in codepen. To help, you can switch the Syntax Highlighting in Codepen to help catch errors.
    Go to your Codepen profile Settings → Editor Preferences (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.

On a side note, you use p elements in your timeline. Can you think of another way to have a list of items in HTML?

5

You suggested that I remove the style tags from the HTML. The problem is when I do this the page becomes uncentered. This results in me failing several challenges. Also, I don’t understand what you mean when you say to ‘’place the selector with the property; value pair into codepen CSS editor’’. Specifically, I don’t know what the terms selector and property;value mean in this context.

Here is my codepen:

6

There are a few ways to style the HTML:

One of them is Inline styling , which you’ve done here:
Inline Styling is done directly in the HTML.

Screenshot 2022-04-10 9.54.26 PM

We can create the Same styling to center the element in CSS:

Screenshot 2022-04-10 9.54.09 PM


By adding this to the CSS, you can Remove the <style> tags from your HTML and the element will still be centered.


  .img-container {
  text-align: center;
}



HELPFUL ARTICLES :

This explains CSS Selectors

Here is a Page of CSS terms :

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.