freeCodeCamp Challenge Guide: Make Images Mobile Responsive

Make Images Mobile Responsive

Problem Explanation

When using Bootstrap, if you want an image to be responsive, all you have to do is add the class img-responsive to it.


Solution 1 (Click to Show/Hide)
<link href="" rel="stylesheet" type="text/css">
  .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;

<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="" alt="A cute orange cat lying on its back."></a>
  <img src="" class="img-responsive">

  <p>Things cats love:</p>
    <li>cat nip</li>
    <li>laser pointers</li>
  <p>Top 3 things cats hate:</p>
    <li>flea treatment</li>
    <li>other cats</li>
  <form action="/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>
1 Like

running cats am i missing something? what else do i need to input? i getting up set because i’ve spent so much time trying to figure this out…please help

I was stuck there too, try putting your img element at the lowest just before your last


Nope… Tried Putting Down …
Nothing Happened .

1 Like

i am unable to see the photo

Help please, I am also stuck on this “Make Images Mobile Responsive”

correct answer . just creating a new element pals


i can not figure out what I’m doing wrong?


after the src=“”…you include the alt=running cats. as smaller image above.(<“” alt=“running cats.”>)

the image in mine isn’t showing

I don’t understand one thing. Previously, we defined classes in css styles and then inserted them inside html elements.
But now, I just have to insert them inside the html element without defining them. Is the definition done back-end that we can’t see, or in the linked address which we’ve to put above all the codes to make it responsive? Or, don’t we need to define them in bootstrap?

Please help understand. Thanks in advance.


add this element on the last line before < / form >

I am really struggling with this task is anyone able to help me?

I don’t understand what i am doing wrong? any help would be greatly appreciated

Never mind got it :slight_smile:


I have the same problem, I can’t see the photo!
Could somebody help me, please?

Thank you

Solved! :star_struck:

But, why? why now it’s ok and not before? :alien:

I had tried putting off the “a” tag before, but it didn’t change anything…

Thank you in advance

Can someone please help? Ive tried all mentioned solutions but nothing is working? What am I doing wrong?

Screen Shot 2017-08-01 at 09.51.40

Just try again to reset the code. and it will work

1 Like

I too am having problem with this. It shows the cats but won’t end the exercise, says to add “below” the small image.

Just simply put the lines below the previous image one like this