Need some help with my code

HTML-CSS
1

Not sure what the issue is but something is clearly missing here.

Please let me know your thoughts, my code seems to be missing something: https://codepen.io/m4v3r1ck/pen/poNazrK

Thanks

2

Hi @m4v3r1ck !

Full error message:
The element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Try using the “max-width” style property

Any questions about the error message?

1 Like
3

Hi @m4v3r1ck ,

Just something to point out, no need to put a closing tag on your img tag.

4

Check your code
You define a img-div but it’s empty in your css

<div id="img-div">
5

It was there from the start:

.responsive-img {
max-width: 100%;
height: auto;
}

Error message: " The element should responsively resize, relative to the width of its parent element, without exceeding its original size", not sure what the system needs to proceed honestly.

6
  • you have no element with class .responsive-img in your HTML, so that selector doesn’t do anything
  • your img element has wrong syntax which can cause tests to fail. You’ve written <img id="image"></img>, but an image tag is self-closing like this: <img id="image" />
  • if you fix those, the tests still won’t pass, but the error message will change, and tell you what’s wrong (look at those carefully, not just the first line)
1 Like
7

As mentioned earlier responsive-img doesn’t exist.
So I would just dump those styles of max width and height into here

#image {
  width: 700px;
}

In order to pass the last test of centering the image properly, you will need to google how to center an image css. The first few results will give the answer.

It will show you how to change the display property and use the margin property to center it.

8

Done. It was good for a minute, then I fixed the code to handle the ‘center’ requirement then it went back to asking for image responsiveness.

I know I am close and I’m not giving up, I will get it right.

9

Worked on the code the responsive part seemed to be good, then it asked for the image to be centered, after which it went back to asking for responsiveness.

I know it’s a little error here and there but I will get it to work.

10

Okay cool, re-read every line of code and re-worked the #image portion in CSS, good to go.

Thanks everyone!

1 Like
11

If you are still struggling, try changing display of the image (as by default image is an inline element) and centering your image using margin. Hope this helps :slight_smile:

1 Like
12

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