Multiple mobile issues

Hey guys,
just need a hand wqith how this page is rendering on the mobile device.
Custom work was done to the header:
#top #header_meta a, #top #header_meta ul, #top #header_meta li, #top #header_meta .phone-info {color: #333333;border-color: red;}
/*#top #wrap_all #header_meta .phone-info {position: absolute;right: -15px;top: 40px;}*/

See how it’s affecting the mobile.

The bigger challenge is with how the content within the COLOR SECTION is rendering on the phone. It doesn’t seem like the FORM wants wrap onto it’s own row. It’s butting up against the image on the mobile phone. Is this because the defined regions 2/3 and 1/3 are set within a color section? Also know that this was done in order to define a section ID that removes margin space from the 2/3 column and the 1/3 column so that we have one clean horizintal layout with the image on one side….and the form to the right of it with a colored background (red).

Is there another approach you’d recommend to this? The idea is to have a slideshow to the left, and the form to the right…with the colored background..

Thanks