Issue 1:
Responsively Style Checkboxes

https://www.freecodecamp.com/challenges/responsively-style-checkboxes

Issue Description

"Like", "Info" buttons are truncated and "delete" is cut off

Browser Information

Browser Name, Version: Google Chrome, Version 50.0.2661.102 m

Operating System: Windows 10

Mobile, Desktop, or Tablet:

Your Code

<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"></a>
</div>
</div>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive">
<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>
<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>

Screenshot

Possible Fix

You can use btn-group which allows you to create a group of buttons next to each other we use btn-group btn-group-justified to take up the full width. W3 link - http://www.w3schools.com/bootstrap/bootstrap_button_groups.asp

<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary"><i class="fa fa-thumbs-up"></i> Like</a>
<a href="#" class="btn btn-primary"><i class="fa fa-info-circle"></i> Info</a>
<a href="#" class="btn btn-primary"><i class="fa fa-trash"></i> Delete</a>
</div>

Or use btn-block to put each button on a new line.

Issue 2:
Forewarning, this may be bike-shedding worthy....

Workspace

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36. (Chrome on Windows 7)

Setting

The CatPhoto is where you make an web page and one component is adding three buttons like below.

Problem

But then you will eventually make it into something like this below.

Notice that the red Delete button is squished and on the side (this is mostly a desktop problem; mobile user won't have the same issue -- see below)

Mobile Version

Solution

So I propose two things:

Change the "Delete" button into a "Edit" button so it'll fit on the button better.

This is fairly easy. You'll just need to change this in the challenge seeds starting with the challenge Warn your Users of a Dangerous Action where the button is added.

Then change the challenges up until the last one on Line up Form Elements Responsively with Bootstrap.

You could also change the icon if appropriate.

Add new challenge to add in making all three of those buttons also have the class btn-sm to make the text inside the button not seem all smushed.

This one will require a little more effort in making an entirely new challenge, which may be unnecessary.

Example:

<button class="btn btn-block btn-info btn-sm"><i class="fa fa-info-circle"></i> Info</button>

If the proposed changes were made, the finished app will look like this: