Mobile CSS – font-family, header height, black bar at top

Hello How do I do the following for mobile devices? (I'm browsing on Android): - change the font - remove the black bar at the top of the page - reduce the header height so there's no white space below the image And how do I troubleshoot the CSS on mobile devices? (on my computer I use Inspect Element on Firefox) This is my mobile CSS (the relevant bits): @media only screen and (max-device-width: 767px), handheld, only screen and (max-width: 767px) { div#respond,.post-meta,article#post-11 h1.entry-title,div.entry-meta,#branding #searchform,#slider-wrap a.more-link,.bp_members #em-wrapper,comments,small center a, h1#site-title a, h2#site-description, #hgroup { display:none; } body { font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; } } Thanks! Jackie