Can't seem to responsively resize my image relative to the width of its parent element, without exceeding its original size?

My first project, feedback, and criticism would much be appreciated also.

Welcome to the forums @mohammedgomer.

You can review this lesson on image responsiveness. Also, the test is checking the img element.

Be sure and click on the red button to see which test(s) fail and text to help you correct the issue. For this one, you may need to add a few things so the test may fail more than once with a different issue each time.

I have already added width of 100% and height as auto to my image element?

For feedback, your page looks good. Some things to revisit;

  • Verify your email addr with codepen so we can see your page full view
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). 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.
    • You have elements out of order. For instance, the title element has a specific purpose and belongs in the head element, not the body.
    • You can review this for an understanding of the HTML boilerplate tags
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Review the lesson about giving meaningful text to links.
  • User’s are not seeing your page the way you want them to. Most won’t have ‘Roboto’ loaded on their computer and you neither link to it (head element in HTML) or import it (CSS).
    • Also, you should always provide a fallback font

Edit: Since you’re also trying to make some of your text bold when you bring in the font you need to have two font weights. One (400) for normal text and one (700) for bold/strong text.

From what I see you’re styling div id="img-div"
As previously mentioned, the test is looking at the img element. So style either that or the id you’ve given the img element.

Just verified my email for you guys to have a look at! Thank you for your feedback Roma :slight_smile:

When I style the image element the test passes, although it does not let me center my image anymore for some reason?

EDIT: Just fixed it! :slight_smile:

1 Like