Responsively Style Checkboxes not executing,whats the problem with my code

Responsively Style Checkboxes not executing,whats the problem with my code
0

#1

Tell us what’s happening:

Your code so far

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

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

</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>
  </div>
  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></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">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>    
<div>
  <div class="col-xs-4">
    <div class="col-xs-4"> <label><input type="checkbox" name="personality"> Loving</label> </div>
    <div class="col-xs-4"><label><input type="checkbox" name="personality"> Lazy</label> </div>
    <div class="col-xs-4"><label><input type="checkbox" name="personality"> Crazy</label> </div>
    <div class="col-xs-4"><input type="text" placeholder="cat photo URL" required> </div>
   
    <button type="submit">Submit</button>
  
 </form>  
</div> 
 
      
      

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36.

Link to the challenge:


#2

You did not nest the checkboxes in a div element with class=“row”. You did nest each checkbox in it’s own div element with class=“col-xs=4”, so you almost have it.


#3

thanks for the reply but still cant get yet


#4


#5

If we look at the starting code of the challenge (see below):

  <form action="/submit-cat-photo">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>
    <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>

and then put in the part you have done correctly (shown in your code at the top), then look at my comments below to see if you can figure out the part you do not have correct yet.

  <form action="/submit-cat-photo">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>

    <!-- You are missing something here -->
    
      <!-- You have the part below correct -->
      <div class="col-xs-4"> <label><input type="checkbox" name="personality"> Loving</label> </div>
      <div class="col-xs-4"><label><input type="checkbox" name="personality"> Lazy</label> </div>
      <div class="col-xs-4"><label><input type="checkbox" name="personality"> Crazy</label> </div>
      <!-- You have the part above correct -->

    <!-- You are missing something here -->

    <div class="col-xs-4"><input type="text" placeholder="cat photo URL" required> </div>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>

#6

Your missing a at the end of the last section


#7

closing div tag sorry above the form tag I think


#8

Capture


#9

still cant get through,someone please help with the code, I need to move to the next assignment


#10

Can you copy and paste your entire code into a reply? Make sure to put 3 backticks on the line before and the line after the pasted code, or it will not show up as formatted code.


#11
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

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

</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>
  </div>
  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></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">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>    
<div class="row">
     <div class="col-xs-4"><label><input type="checkbox" name="personality"> Loving</label> </div>
    <div class="col-xs-4"><label><input type="checkbox" name="personality"> Lazy</label> </div>
    <div class="col-xs-4"><label><input type="checkbox" name="personality"> Crazy</label> </div>
 
 <div class="col-xs-4"><input type="text" placeholder="cat photo URL" required> </div>
  </div>
<button type="submit">Submit</button>

      </form>
</div>

`


#12

Based on your most recently posted code, you are missing a </div> for the <div class="row">. It needs to go before the </form>


#13
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

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

</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>
  </div>
  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></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">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>    
<div class="row">
     <div class="col-xs-4"><label><input type="checkbox" name="personality"> Loving</label> </div>
    <div class="col-xs-4"><label><input type="checkbox" name="personality"> Lazy</label> </div>
    <div class="col-xs-4"><label><input type="checkbox" name="personality"> Crazy</label> </div>
 
 <div class="col-xs-4"><input type="text" placeholder="cat photo URL" required> </div>
  </div>
<button type="submit">Submit</button>
</div>
</form>

#14

still not successful


#15

I am going to post your part (from the last opening form tag to the bottom) of your latest code below with comments, so you can see exactly where the issues are. You will notice that I have indented the code, to make it easier to figure out what is missing/wrong.

  <form action="/submit-cat-photo">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    // you are missing a closing div for the div above with class="row"
    <div class="row">
      <div class="col-xs-4"><label><input type="checkbox" name="personality"> Loving</label> </div>
      <div class="col-xs-4"><label><input type="checkbox" name="personality"> Lazy</label> </div>
      <div class="col-xs-4"><label><input type="checkbox" name="personality"> Crazy</label> </div>
    // here you are missing a closing div for the div above with class="row"
    <div class="col-xs-4"><input type="text" placeholder="cat photo URL" required> </div>
    </div> // this closing div should not be here
    <button type="submit">Submit</button>
  </div> // this closing div should not be here
  </form>
// missing the original closing div that was here

#16

thank you so much I finally succeeded, I saw where it was