Fix Flip and Memory to support mobile

[sgmbr]

Additional requirements:

• Showing 4 cards in a row when landscape mode.
• Vertically centering words.
• Show long words in small letters to fit the card (if possible)

[sgmbr]

It uses Bootstrap. .col-xs- applies to <768px, and the longer side of phones are all less than this, so it can't be changed between portrait and landscape using Bootstrap. A downside of using Bootstrap: less flexible. It is okay as long as a website fits what Bootstrap provides, but when you want more control it's useless.

[sgmbr]

Vertically centering https://css-tricks.com/centering-css-complete-guide/

[sgmbr]

Creating custom col http://stackoverflow.com/questions/28750907/how-to-customize-bootstrap-column-widths

[sgmbr]

.col-xxs-6 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }

@media screen and (max-width: 560px) { .col-xxs-6 { float: left; width: 50%; } }

[sgmbr]

Couldn't find a way to do

• Show long words in small letters to fit the card (if possible)