Desperate need for code to fix website in portrait mode on iPad

I have an SMTheme that will not output correctly in portrait mode on iPads. My client has already paid for this theme and at this point, with so much time invested, I can't simply change the theme and go through all of the fine tuning I have done to date on another theme.

When I first loaded the theme, it output a mobile site to a tablet so the logo was large and blurry, the menu was huge and overall, it was just pretty ugly. I was able to fix that by implementing the following code under top.php:

<meta name="viewport" content="initial-scale=1,maximum-scale=1,width=device-width">

Now in landscape mode, it looks great; however, when changed to portrait mode, the menu bar grabs a 'default' font from some strange place - it looks like arial, makes the type oversized and pushes the menu bar off to the right. In addition, the slider is too large for the space and also extends to the right. The rest of the site is the size it should be but now has a large right margin to allow for the menu bar and slider.

I have implemented various @media commands within style.css the most recent being:

@media only screen and (device-width: 768px) {

Nothing I do works.

I noticed that tablet.css seems to be ignored completely and doesn't control any of the output on an iPad at least..perhaps an Android one but not an iPad.

I also added jQuery within top.php - something similar to the following:
jQuery(window).bind('orientationchange', function(e) {
switch ( window.orientation ) {

It also did absolutely nothing. It's as though the portrait format is being controlled by some 'ghost' script that pretty much exists nowhere. I'm unable to hire someone to fix this, since my client is done paying for this site (which was an absurd bargin to begin with as he's on a tight budget), so I'm literally begging someone to help on this. Since it's an SMTheme issue, no one is helping from other forums.

I promise to post the answer if someone does help from elsewhere.

I found a solution that hopefully helps others. I commented out the line:

<!--<link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/css/tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" />!-->

within library.php.

This forced the tablet to view style.css for it's values and disregard the 'mobile' site parameters, which I didn't want showing on a tablet. From there, I created a section within style.css under the following:

@media only screen and (min-width:641px) and (max-width:1023px) and (orientation:portrait) {

as well as:

@media (max-device-width: 600px) and (orientation: portrait) {

I needed two @media control options since my site was a mess on smaller tablets such as the Blackberry Playbook - once again, in the portrait mode. The second @media addressed that successfully. Under each @media I needed different values to accommodate the various sized screens.

I intentionally didn't disable the mobile attributes for cell phones as it seems to work quite well as long as you don't use tables in your coding.