Freecodecamp: Use Responsive Design with Bootstrap Fluid Containers needs Rewording

Created on 7 Dec 2016  路  18Comments  路  Source: freeCodeCamp/freeCodeCamp

Challenge Use Responsive Design with Bootstrap Fluid Containers has an issue.
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:


<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>

<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="/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>

Just a suggestion to change how you phrase things in this item.

The item asks the learner to wrap all HTML in the <div class=container-fluid></div>. When I read this, I read that to mean everything, including

Mirvax picture Mirvax on 14 May 2017

Thank you guys for helping...:)

gwapoJay picture gwapoJay on 22 May 2017

Thanks for all of the help, from reading all post was able to confirm what needed to be done. Now that being said see that there is a discussion as how to re-word this, I would like to put in my "two-cents".... should be word something like this.......

To get started, we should nest all of our MAIN HTML in a div element with the class container-fluid.

So ending like this