Help , please I am stuck. This error message keeps showing

HTML-CSS
1
  1. 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 : expected ‘none’ to not equal ‘none’
    AssertionError: Try using the “max-width” style property : expected ‘none’ to not equal ‘none’
2

have you tried using the max-width style property?

3

I have done that, it’s still the same.

4

https://codepen.io/Amara-okereke/pen/mdWpYpb
Please here is my codepen, please have a look. I desperately need help. Thanks

5

you have it inside the media query, the max-width property should always be set on the image

6

So sorry, please, I’m a bit confused. i have max-width under image as 100%. please help, thank you.

7

but it’s inside a media query, so it’s not always applied

apropos your CSS, on line 25 you are missing a }
oh, sorry, your media query is actually not valid, as you have a ; after it, if you delete line 30 nothing change

fix both and it should work

8

I have deleted line 30 and added { on line 25, it is still not working. I’m new to coding, please can you look again and see what I’m doing wrong. Thank you so much.

9

you have used #img as selector, but I don’t see any element with that id

also you have

<image id="image" src="https://www.history.com/.image/ar_16:9%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTU3ODc4Njc0MzgzMzE2NzAz/nelson_mandela_hero-2.jpg" alt="A photo of Nelson Mandela First Black President of South Africa" width="100%" heigth="auto" display="block">

here image is not a valid element name, it should be img

10

Thank you so much for your help, I spotted the error you pointed out, as i was correcting it, i don’t know what I did and messed up all my work. I feel so frustrated right now. Please can you check my codepen again please. I don’t want to give up. Thank you so much for your time, its highly appreciated.

11

let’s look at your sintax,a nd see what needs to be fixed

CSS
line 9, missing value
line 10, missing value and semicolon
line 28, missing colon and value

HTML
line 6, a figcaption can’t be a child of a div, it needs to be a child of a figure element
line 17, you are missing the element name
line 21, 23, 30, 38, </br> is not a valid tag, br is self closing and doesn’t need a closing tag
line 38, wrong order of closing tags -the opening tags are <p><i><b>, then the closing tags need to be </b></i></p>
line 49, the href value is not a valid link

you have also main, figcaption and div elements closed in the wrong order

after you fix those, there will be a few issues of css not applying - for example you do not have an #img element, but you have an #image element, so you would need to change that selector in your css

12

You are God-sent! So happy to have someone like you here. You are indeed a great teacher! Thank you so much. I will go back and sort it out now. Thank you once again, much appreciated.

13

Hi, I have been able to get all the errors sorted but it’s still giving me 9 out of 10. Please help me, if you can. Thank you so much.

14

Wow…Finally I made it!!!

THANK YOU SO MUCH FOR YOUR ASSISTANCE!

15

awesome! but you have still some issues

you can use the css analyzer integrated in codepen, it will point out something you still need to fix

image

you also have still various issues in your html
you can use this validator, Ready to check - Nu Html Checker
paste in there your code from codepen - as you are using codepen you can ignore the first warning and the first two errors, but the rest are things that are not correct in your html
You have not fixed all the issues I have pointed out above, you really should

16

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