Macbook 13" display issues

Hi there,

the macbook image looks like you have the browser zoom increased. Hows it look when you set it to Actual Size?

That's rendered at 100%. This emulator does a good job at reproducing those exact problems when you punch in the site URL: http://responsiv.eu/er.php

Is that macbook in retina mode? If so there should be enough vertical pixels to display the content.
Issues i can see on smaller low res devices around the 1300 x 800px range is that the page hero content is 690px tall so its filling 85% of the screen height. And with the IE hack in place the container can't grow to accommodate it.

Wondering whether we can introduce some fluid typography so the text is sized to browser width.....

That display from the screenshot was the default 1680x1050. I don't know if retina is enabled by default, but let's assume the display issue is the result of activating it. We would still need some sort of solution.

I would love to see the fluid typography function as a standard feature as that seems to be the crux of the issue here (everything else appears to be functioning as expected via the full screen header, etc.).

Thoughts?

Drew

As the problem is height based, the standard VW fluid type rules aren't gonna work. You could raise a new media query that covers the max-width and the max-height?

Probably, but that adds another layer of complexity (not to mention a lot of added work) on a per use basis for that element.

Any ideas on a universal solution? Something like a custom function snippet until it can get worked into a release would be good.

The real bug bear is the fixed height hack for IE11. Without that you could increase the Hero top padding or use the site header offset so as the content won't fall behind the nav. Then on lower res shorter height screens the content would just run down the page.

So maybe try this IE only css hack for the 100vh Height rule:

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

Baking in a fix for these issues would be problematic, as they are design orientated, it may work for some cases and then fail for others as seen with the IE hack.

Exactly, it's like an ill-fitting suit; fixing any mismeasured piece causes a problem with another.

Good news via the IE hack is that media query does apply the original height: 100vh !important; style but the MacBook resolutions are still messed.

FWIW, this is actually the third user where we've encountered this. In the previous two, we managed to convince them to sidestep it via different content but with this third instance, it's clear we'll need a reliable ongoing option.

Have you tried adding increasing the top padding or the site header offset so the content doesn't go behind the header?

The nav would need adjusting to suit a smaller screen, i literally have to reduce my resolution below 1200px to mimic the issue.

I can certainly try but that circles back to the whole including a fix that changes the display at other resolutions. That's exactly what I would like to avoid doing as it all circles back around to making loads of per-use changes as opposed to reliable long term solution (Macbooks aren't going away like we know IE one day will).

Are Tom or Leo Macbook users? I have a similar issue as you in that I don't have the physical device on hand so troubleshooting is that much more challenging but if either of them have a Macbook 13 or 15, that might help.

I know Tom has a macbook so ill ask him.

Many thanks! I'm really curious to see what we can do with this as I only see it becoming more of a pain point over time.

I'll assume Tom will reply here once he's had a chance to look everything over. Thanks again David :)

I don't know if it's a macbook issue or just a small screen issue.

This is what I added the "Offset Site Header Height" option for in the Site Header tab.

If you add the height of your header (150px) to that field, it will prevent any overlapping from happening.

Well that's thinking ahead, isn't it?

Adding the offset resolved over overlap issue so yay, we can check that one off.

I still see the nav menu triggering a line wrap on Macbooks (but not similar resolution PC notebooks). Suggestions there?