Fixing carousel on smaller width windows

This is of questionable front-end quality and probably contains an anti-pattern or two. Also, hasn't been tested on my mobile device. If you know anything about mobile stylesheets, your input would be welcome. I just came up with my own interpretation of how to implement a mobile stylesheet.

The carousel was not looking great when the width of the browser window was narrower than 1200px:
![gr8ladies_carousel_offcenter](https://cloud.githubusercontent.com/assets/3268098/5560596/f0f2e098-8d5c-11e4-868f-63984e9adc9c.png)
There was a gap below the picture, but still grey colored. This was happening because there was a min-height set but the pictures themselves were pretty wide. That picture is 480 x 1200, so at browser widths much less than 1200px, there was the gap. 

The reason there was a min-height appears to be because the first carousel image is actually an html list, not an image, so it wasn't scaling.

To solve this, I decided to add a min-width to the carousel that would eliminate the gap. This would look terrible on small screens like phones. Even without the min-width, the carousel looks pretty terrible on my phone (Jenn, how does it look on yours?). So, I opted to eliminate the carousel on mobile, replacing with a brief description of Gr8Ladies.

Here is what it looks like now when the window is narrower:
![fixed_gr8ladies_carousel_smaller_window](https://cloud.githubusercontent.com/assets/3268098/5560604/a867f222-8d5d-11e4-97b5-540da5352afa.png)

Also, there were some minor tweaks in the list in the carousel: <li> tags without a surrounding <ul></ul> don't do anything. & should not be used in html, it should be &amp; instead, since & alone has special meaning.