I think you could address this by making one small change to the main CSS file, style.css, where it declares the design specific @media queries on line 1422 where it has:
@media screen and (min-width: 768px) {
You could change the min-width value to 769px which is exactly 1 pixel bigger than the iPad reports it’s screen size (in both vertical and horizontal layouts, this is a very irritating decision by Apple in my opinion). The only concern I have about this change is I do not think that UberMenu will respond and show the mobile menu unless you also make this change in the UberMenu CSS files.
We have plans to make a more dynamic vertical masthead that responds to smaller widths, before reaching the mobile size of phones, and allows you to enable an options “collapse” setting which makes the vertical masthead a thin vertical column, or maybe just an icon, that users can tap/click to expand for access to the menu. It was something I hoped to do already but we did not have time for this feature during the development of the initial release. It is still one of our goals to add this functionality and it should solve the exact issue you’re having.
As a side note, one reason you’re having the problem a slight bit more exaggerated than it is on other skins is the specific skin being used (and the “boxed” layout) has a dedicated width for the vertical masthead. In the default styling and most of the skins this vertical masthead has a % width that takes over when you go below very large screen sizes, however this one was designed with a fixed width although it presents a bit differently in “boxed” style. You can adjust this by editing the Skin 4 CSS file, or making a copy of Skin 4 and calling it your own… Skin 4 Custom or use a client name if you like.
The adjustments you could make to achieve this would be adding a couple of CSS entries to the style sheet. The first addition to Skin 4 would be a just before the end of the @media query that ends on line 295, add this code:
body.boxed-left #page { margin-left: 27.5%; }
.v-masthead-small.boxed-left #masthead, .v-masthead-small.full-width-left #masthead, .v-masthead-small.boxed-left #masthead .masthead-vertical-bg, .v-masthead-small.full-width-left #masthead .masthead-vertical-bg, .v-masthead-small.boxed-right #masthead, .v-masthead-small.full-width-right #masthead, .v-masthead-small.boxed-right #masthead .masthead-vertical-bg, .v-masthead-small.full-width-right #masthead .masthead-vertical-bg {
max-width: 25%;
}
Next, AFTER the end of that @media query, add a new one to the very end of the file which targets larger screens:
/* Minimum width of 1200 pixels. */
@media screen and (min-width: 1200px) {
body.boxed-left #page { margin-left: 300px; }
body.boxed-right #page { margin-right: 300px; }
}
This should work, but I’ve only tested it in my browser console so I may have missed something. Give that a try and let me know if there are any issues.
