Issue 1:
Challenge Responsively Style Radio Buttons has an issue.

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 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>
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">
<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>

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: