CSS Change for mobile device (reduce height of colour bars)

I need some help resolving this issue on the "appointment" page. currently when the page is smaller or when viewing on mobile devices the colour block is extended in height. perhaps due to the text "Please select a different type of class" and that means that the unavailable colour block is cut off the page. is there a way to move the colour blocks under the text so that they don't cut off the page? or re-arrange them slightly only on mobile devices so that they all display on the bottom of that page? also they should not be that heigh in terms of their colour should be more like a square.

Please see Screenshot: http://monosnap.com/image/828YkRG16jRYDUuflDIbcQ2HsCbwf4

Domain Link: http://tinyurl.com/pk7kh8x

you need to be logged in
try test user account

Support access also open