I could not complete the last task. plss can someone help?

<html>
  <head><title>Tribute Page</title>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    
  </head>
  <body id="main">
    <h1 id="title">Vaibhav Rautela</h1>
    <div id="img-div" align="center">
     <img id="image" src="https://bloody-disgusting.com/wp-content/uploads/2016/09/Stephen-King-1.jpg"  alt="Image" width="700" height="500"> 
      <div id="img-caption">alana falana
    </img-div>
      <div id="tribute-info">alana falana
    </div>
    <a href="https://www.w3schools.com" target="_blank" id="tribute-link">alana falana</a>
    </body>
 
  </html>

css

<style>
#img{
  max-width: 700px;
  width:100%;
  display: block;
  height: auto;
  margin: auto;
}
</style>

problem: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.?

You need to fork the pen linked in the project so that you can run the tests. You need to use all the required elements and you need to write the css.

2 Likes

Welcome there,

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

2 Likes

The project has a codepen template that you can work on with tests that you have to complete to complete the project.

1 Like

Now the last task is to be completed
The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Now the last task is to be completed. how?
The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

now the last task is to be completed. how?
The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

@TJTALKS, it’s best if you post a link to your pen so we can see your code. Snippets don’t help, all anyone can do is guess.

On a side note, that’s the first line in the failing message. 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.
1 Like

https://codepen.io/TJTALKS/pen/qBrNmxz

@TJTALKS, there are some things incorrect;

  1. Do not use the style elements in the CSS editor. In codepen, the HTML editor is where you write the HTML code that would be between the body element. For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    The CSS editor is like having an external stylesheet and you would not include the style tags. These would only be in the head element. They will cause problems when placed in the CSS editor.
  2. As I noted previously, read the entire message. Not just the first line. The entire 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'

Notice how the message is telling you what it’s looking for?

Some additional things to note;

  • The <img> element is self-closing so </img> is invalid and what you have </img-div> is not even a valid closing tag for anything.
  • In CSS you want to style the img element. You do not have an id called #img-div. What you want to style is id="image".
  • When you correct these issues and run the tests again there will still be 9/10 but the failing message will be different. Be sure and read the entire message and use it to add another property: value; pair to the selector.
    When I do this all the tests pass.

On a side note, the URL for the image is not valid. If I place that in another tab it returns a 404 Not Found. Make sure you’re using the correct URL for the image.

1 Like

Be sure and read the entire message and use it to add another property: value; pair to the selector.
Mam how to add. still not getting
https://codepen.io/TJTALKS/pen/qBrNmxz

A few issues.

No.1
This is incorrect.
.image

You have an id of image so you are supposed to write this
#image

No.2:
As mentioned earlier, you need to move your css over to the css section.
Delete this in your html.

  <style>
    .image{
      max-width:50%;
    }
    </style>

and write this in the css section.
Screen Shot 2021-05-18 at 10.31.29 AM

Now you have a new error message.
Open up the test suite and read what it tells you to do.

When you do all of those things then the test will pass.

https://codepen.io/TJTALKS/pen/qBrNmxz
mam still not getting

Delete the style tags.

They should not be there.

You should only be left with this in the css section

   #image{
     max-height:70%;                       
}  

Then you have this issue.
max-height

You had it correct before with max-width

Now your code should look like this

   #image{
     max-width:70%; 
      }    

Read that last error message and add the property it tells you and the test will pass.

Make sense?

1 Like

thnk u very much mam . it worked…hope to get help frm u in near future.

1 Like

mam now it worked. thnx mam.

A post was split to a new topic: Need help with survey form. Thanks!

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