Bootstrap - Make Images Mobile Responsive

HTML-CSS
1

Tell us what’s happening:

I have done everything the instructions told me to do and even used the updated BS4 code of “img-fluid” instead of “img-responsive” but still can’t pass this step… I need help please

Your code so far

<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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<a href="#"> <img class="img-responsive" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">

  <p>Things cats love:</p>
  <ul>
    <li>catnip</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>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Challenge Information:

Bootstrap - Make Images Mobile Responsive

fCC error
fCC error1348×586 310 KB

3

Here is one step you need to do if your code is wrong

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

if it not works let me know

4

don’t do that, the version of bootrasp used is fixed in the curriculum

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

5

I’m using the fCC app on my pc, i’ve also tried all the steps but still no solution… what could be wrong??

6

maybe if you read these articles it may help you.

How to Report a Bug to freeCodeCamp
How To Get Help When You Are Stuck Coding - Guide - The freeCodeCamp Forum

7

I’ve reported the bug, thank you very much!

1 Like
8

there isn’t an app for pc, can you add more details of what you are using?

9

here’s a pic of my desktop… I’ve circled both the app’s location on my desktop and also the one pinned to my taskbar.. Aren’t those apps from fCC??

desktop.PNG
desktop.PNG734×794 97.5 KB

10

if you created a shortcut from the browser, that can explain what that is, it’s the same browser you usually use but without the browser UI. there isn’t an app for pc.

which steps have you tried?

11

I just restarted my laptop and my code passed. Thank you very much!