Help with Tribute Page: The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size

Code Feedback
1

Hi, I have build the skeleton of my tribute page, but I can’t seem to get it passed. The error I’m getting is:

1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.

But I am pretty sure I’m passing this test,can someone please have a look and give feedback.

Link to project: https://codepen.io/sed11q/pen/yLPbzQm

2

Read the full error message, it is telling you what is missing.

Try using the “max-width” style property : expected ‘none’ to not equal ‘none’

3

Hi @lasjorg thanks for the pointer, the thing is I saw that but I have no idea how to interpret it. It looks like it says that I can not have the max-with style property == none, but if you’ll check code snippet below that is not the case here. Am I missing something?

@media (max-width: 400px) {
  figcaption {
   font-size: 0.8rem;
  }
  h1 {
   font-size: 1rem;
  }
  img {
    width: 100%;
    height: auto;
  }
  #bib-heading {
    font-size: 1.2rem;
  }
}
4

It is specifically looking for the max-width property. It will be set to none if you do not set it. The test requires that you set it to 100%.

max-width: 100%

I believe it also requires display: block to be set. But you can tell if you just keep reading the error messages.

5

Thank you @lasjorg I see where I misunderstood, I presumed the @media (max-width: 400px) was the deceleration required. Much obliged!

1 Like
6

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