Bootstrap: Tests pass, but result is not visible

[alirezaghey]

[https://www.freecodecamp.org/learn/front-end-libraries/bootstrap/make-images-mobile-responsive]In (this challenge), you are asked to add the img-responsive class to an image and you are told that the image will fit the screen width.
I did that, the image didn’t fit the screen width but the tests passed.

Here’s the full HTML I used:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<img src="https://bit.ly/fcc-running-cats" class="img-responsive">
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

I wanted to open an issue on FCC’s GitHub but wasn’t sure. It may be related to my system after all. Can someone please check and let me know?
Thanks

[Roma]

In the future, If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

It will also tell us what browser you’re using. I’m not sure which browser you’re using.
The text from the lesson says It would be great if this image could be exactly the width of our phone’s screen. And it does indeed.
If you’re making the screen width too wide then it’s not representative of a phone and will not grow to match the size of a medium or large screen. Is that what you’re seeing?

[alirezaghey]

This is where it breaks. Container width is less than 500 pix. I don’t know if that’s expected behavior.

[Roma]

@alirezaghey

This is where it breaks.

What do you mean by “breaks”?

EDIT: if you reply to my post I get notified. You can also mention my @name (@Roma)
if you reply using the generic reply button I will only stumble on your response.

[alirezaghey]

If you reply using generic…

Thank you for letting me know.

What do you mean by “breaks”?

The instruction page of the challenge says:

It would be great if this image could be exactly the width of our phone’s screen.

And further down continues:

Fortunately, with Bootstrap, all we need to do is add the img-responsive class to your image. Do this, and the image should perfectly fit the width of your page.

[Emphasize is mine]
With “breaks” I mean that adding the img-responsive bootstrap class does not fulfill the promise as stated in the challenge, since it is visible that the image does not fit the phone’s screen size, while the tests for the challenge all pass positively.

I also checked the original image’s size and it turns out that it isn’t more than 400 x 400. Using a larger image solves the problem.

Do you think it would make sense to swap the original image in the challenge with a higher resolution one to avoid such confusion and help Campers better visualize the effect of the solution?

[Roma]

@alirezaghey

The instruction page of the challenge says:

It would be great if this image could be exactly the width of our phone’s screen.

And further down continues:

Fortunately, with Bootstrap, all we need to do is add the img-responsive class to your image. Do this, and the image should perfectly fit the width of your page .

The second also still means phone.

@alirezaghey

I also checked the original image’s size and it turns out that it isn’t more than 400 x 400.

A phone’s width will not be much wider.