I might be mistaken, but I believe max & min-width are measuring the browser viewport size, not the display size. Also, with zooming, the # of pixels can be reported higher or lower than the number of physical pixels, so the media queries should be built with the idea that the pixel grid may be anything within the range.
Hi Magda-
I am testing on a macbook & a Windows 7 PC attached to 1920×1080 monitors. If the browser window is set to a width greater than 1366 up to the full size of the window (or bigger), it happens. As mentioned earlier, Chrome, FF, IE, and Safari all show the same behavior. 1080 monitors are common these days and there are folks with monitors wider than 1920 as well, so…
One more issue:
* At browser widths above 1280 and browser heights less than 670, the hero unit brand icon is partially or totally placed above the top margin of the window (see pics: height is 660 & height is 572). The shorter the window, the worse the problem. This is occurring on FF 42 (macosx & win7), Safari 9 (macosx), Chrome 48 (macosx & win7) & ie 11 (win7). At smaller widths, the vertical placement is scaled to avoid the problem.
BTW, the bug “Hero unit brand icon is obscured by responsive menu bar at browser widths between 481 & 767” mentioned in my previous post occurs on all tested browsers, FF 42 (mac & win7), Chrome 48 (mac & win7), Safari 9 (mac), safari iOS 8.4 & 9.1, Chrome 48 Android 5.1.
Thanks. Those fixes look great. We are almost there.
Issues noted are:
* On Firefox, hero unit is not visible when browser width between 991 & 768. It’s visible above and below these widths. Observed on FF 42 (macosx & win7). Does not occur on safari or chrome or ie.
* Hero unit brand icon is obscured by responsive menu bar at browser widths between 481 & 767.
* Parallax images do not properly rescale on safari iOS 9.1.
This looks much better and tests out mostly well on the various screen sizes and devices. There are still a few issues, though.
The “Read More” works properly on Safari & Chrome browsers (win, mac, ios), but the same problem remains on Firefox v.42 (tested on Mac OS X 10.11 & 10.9 and Win7) and IE 11 (tested on Win7).
Also, the hero-unit header text is not properly enclosed by the shaded background on iPhone5 (either orientation) & iPad Air (portrait only) sized screens. Is there a reason the text is not simply enclosed in a div with the semi transparent background? It seems that would be a more reliable way to achieve the look and maintain proper padding & margins.
If needed, I can send a screenshot or two, but it’s a bit tedious. Basically, if the text breaks onto more than one line, then it extends beyond the bottom edge of the shaded region.
There are no problems with the “to top” button. The problem occurs with the “Read More” paragraph element that looks like a button (see 1st attached picture). Click on that button. For comparison, click on the “Clients” item in the navigation menu. “Read More” should behave like “Clients” and scroll to the exact same spot.
The templates were purchased and downloaded on Oct 2, 2015 from envato. My CSS customizations are in the file ./css/mods.css .
I will make 1481×1080 versions of the parallax images. I could not find a specified size in the template documentation.
Layout is working better, but there are still some issues:
Hero unit header text extends beyond the header’s shaded background (see 2nd attached picture) on narrow layouts.
Why does the hero-unit brand graphic disappear between 480px and 990px?
Quotes are too wide for the display on iPhone5, producing a white gutter down the right side. http://prntscr.com/92blwl
