Making the Twenty Eleven theme mobile-friendly

My site looks exactly how I want it to look on a desktop, but site title and tagline are all scrunched up on my iPhone. My site title is an image and it overlaps on the search box. It also extends past the edge of the page on the mobile version. How can I keep the size ratio the same on mobile as on a desktop? My site is shewenttospain.com if it helps to look at it.

Also, the black bar below my header photo with drop down lists is nicely laid out on the desktop but the drop down menus take up 4 levels on the mobile version. Is it possible to turn that bar into a vertical drop down list on mobile only instead of a horizontal drop down list to make it more visually appealing and user friendly?