Help Passing Responsive Web Design Principles

Help Passing Responsive Web Design Principles
0

#1

https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays

So i don’t understand why i can pass this test without actually creating the full answer (FCC).

In this question we are require to simply restrict the image size to half of its original size, yet after only completing the height value, i was able to pass the test ( i had not set a width value. )

the original height and width are 200 respectively and needed to be changed to 100, a simple task, is this a bug and if so how do i report it?


#2

Thanks for helping to make the curriculum better. You can report this testing bug as a GitHub Issue.


#3

As you said, you left the width out of your style that it is now like:

<style>
  img {
      height: 100px;
  }
</style>

and that means you implicitly set the width to auto.
As the image has an aspect ratio of 1:1 the style will assume that width will also fall to 100px when height is dropped from 200 to 100.

With your code above,just get into the devtools and see the img style. You just see something like:


Try to toggle the height checkbox and watch the model box values.

Thats why you are passing the challenge.
Now, try to change in style the height with the width and let the height to auto. Observe whats happening.


#4

@StitchesDoes @ArielLeslie I don’t think it is a test bug. i think it was intended to check, in this particular case, for ether a width of 100px or a height of 100px and not checking the aspect ratio of the image.

Try replacing the src attribute for the image to any image having an aspect ratio of 1:1 and if you specify in style ether width or height of 100px you will pass the challenge.

Instead, if you replace the src attr to point to an image with a different aspect ratio then 1:1 you will just need to write in style width: 100px; height:100px; and you will pass the challenge.

As I said, i think the test was intended for this particular challenge and i don’t see it as a bug.


#5

Very helpful. Thank you!.


#6

Thank you so much, sorry for the late reply . i understand fully now. You’re great !