Mobile Viewing Issues

Hi, I had a couple questions related to the responsiveness of the site.

I've worked to code the site to look great on tablets and larger mobile devices, but if I view the site on a smaller mobile device (iPhone portrait), it's pretty messed up. It seems like larger mobile devices and smaller ones both share the "mobile.css" file for layouts. I'm thinking the changes that I've made make it look great on certain screen sizes but not others. Is there a way to add another file (possibly like a mobile.large.css file) that controls just the larger screen sizes and the "mobile.css" dictates the smaller?

Also, if I view the site on a tablet then it looks great, but if I resize down my browser on a computer to around that same tablet size, the site is pretty rearranged. It doesn't look the way it does on a tablet. I know that the view on a tablet is the most important, but I'm wondering why it looks different if I resize the browser window on my desktop down to view the site.

Would appreciate any help I can get!

Site: http://www.cvw.christianvideowarehouse.com

You can edit:
/templates/gk_storebox/lib/framework/helper.layout.php
and add more css files, they are generated by this code:

Code: Select all

// set media query for small desktops
         echo '<link rel="stylesheet" href="'.($this->API->URLtemplate()).'/css/small.desktop.css" media="(max-width: '.$template_width.'px)" />' . "\n";   
         // set media query for the tablet.css
         echo '<link rel="stylesheet" href="'.($this->API->URLtemplate()).'/css/tablet.css" media="(max-width: '.$tablet_width.'px)" />' . "\n";
         // set media query for the small tablets
         echo '<link rel="stylesheet" href="'.($this->API->URLtemplate()).'/css/small.tablet.css" media="(max-width: '.$tablet_small_width.'px)" />' . "\n";   
         // set media query for the mobile.css
         echo '<link rel="stylesheet" href="'.($this->API->URLtemplate()).'/css/mobile.css" media="(max-width: '.$mobile_width.'px)" />' . "\n";


The values are taken from template settings section, but You could hardcode any other css files to set things in between.

The difference between tablet and browser with reduced width should not be seen.
Link to your site doesn't work so I cant check, but if You will share working link, I can compare view on Ipad with browser view.

Ups, sorry, its WP question not J . Ill write an answer in few minutes.

The file to edit is:
/wp-content/templates/StoreBox/layouts/responsive_css.php
and section where media-query templates are added is here:

Code: Select all

// tablet.css is always loaded after the desktop.small.css file
wp_enqueue_style('gavern-tablet', gavern_file_uri('css/tablet.css'), array('gavern-extensions'), false, '(max-width: '. get_option($tpl->name . '_tablet_width', '1030') . 'px)');

// tablet.small.css is always loaded after the tablet.css file
wp_enqueue_style('gavern-tablet-small', gavern_file_uri('css/tablet.small.css'), array('gavern-tablet'), false, '(max-width: '. get_option($tpl->name . '_small_tablet_width', '820') . 'px)');

// mobile.css is always loaded after the tablet.small.css file
wp_enqueue_style('gavern-mobile', gavern_file_uri('css/mobile.css'), array('gavern-tablet-small'), false, '(max-width: '. get_option($tpl->name . '_mobile_width', '580') . 'px)');