The Jetpack mobile theme is not active on tablets, so if that’s what you’re using you won’t see it in effect on iPads.
Since Quintus is already a responsive theme that adapts to different screen sizes automatically, you could try disabling the Jetpack mobile theme and seeing how you like the display on tablets and phones.
Thank you for your input. I did disable the jetpack theme, but it still has the problem of my custom header not shrinking to the size of mobile and tablet screens automatically. Is there a code I can use within the theme to make sure it does this?
The header in Quintus is best suited for abstract images without text or logos whose edges may get cut off at smaller screen sizes:
.blog-header {
background: url("images/header.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
display: table-cell;
height: 250px;
padding: 0;
vertical-align: middle;
width: 1100px;
}
If you want to stick with Quintus, you could try adding different header graphics within media queries geared to different screen sizes.
You can learn more about using media queries that target certain screen sizes here:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
p.s. If you decide to go this route, be sure not to edit the theme files directly, or you’ll lose all changes when updating the theme. Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
