Firstly I have been having issues with the top header image in front page which has the logo & menu on it (the image area was becoming smaller and showing body background color) on tablet and on high-res screens (backgroung color had been showing up above and below the header and the menu/logo was floating inbetween) in both cases.I think I solved some of this, but I would like to check that.
To solve this I played around with this part of the CSS using media queries:
- Code: Select all
#gkHeaderMod img {
height: auto !important;
left: 50%;
max-width: none !important;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
width: 100% !important;
will-change: top;
}
I'm also having an issue with the parallax script / css as it seems really difficult to get the module (with original text) to become the actual size of the background images I'm using (1920x646 pixels) in the bottom1 module position.
The system always seems to be enlarging the background image (with use of parallax suffix) thus making it blurry, and secondly cropping height wise leaving a final view-able image of for example 1904x404 pixels. Ideally I would like to be able to set the height of the module (as the size of the background image) with the right coding (with the background (parallax) image not enlarged).
Finally one last issue, it seems on I-phone the parallax background image ends up super enlarged, becoming really pixelated/blurry, on android the result is much better by the way.
