Closed variablenix closed 8 years ago
On desktop you can try to resize your browser to see if the same problem happens. You can also connect your Android/iOS device to Google Chrome/Safari to inspect. I think this is just a CSS conflict and is easy to solve. If you have the site online, I can take a look.
This is the site in dev https://dev.koderoot.net/grav/
If you access the site on a mobile device (desktop is ok), you'll notice an overlap, making it impossible to minimize the web client. I'm going to poke around some more to see if I can find where the conflict might be coming from.
You can try to decrease z-index value of header in assets/css/main.css until the problem is fixed.It is currently set to 1030:
#header {
position: fixed;
z-index: 1030;
left: 0;
top: 0;
width: 100%;
background: #fff;
background: rgba(255, 255, 255, 0.95);
height: 3em;
line-height: 3em;
box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1); }
If you know SCSS, you can modify it in assets/sass/main.scss and re-create the CSS file.
I was about to give an update, but you got to it first. This did the trick with decreasing the z-index value. Thanks a lot for your help!
Hi,
First, I have been testing big picture in a dev environment and really like it's design a lot!
I've integrated XMPP web client Converse.js and have noticed on my mobile device the white header bar overlaps the Converse.js window using a screen size of 5.5-inch. So what happens is you cannot click the X to minimize the chat window. The X also loses its roundness and appears more oval.
I can't replicate this behavior with the default antimatter Grav theme or on the main Converse.js website from a mobile device.
Here is the unexpected behavior in action with big-picture.
As you can see from the screenshot the 'Sign in', 'Register' and 'X' minimize button are behind the white bar, so it is not possible to minimize the window -- making it impossible to use any function of the website.
For some reason it seems something in big-picture is conflicting with the Converse.js CSS files, but I don't think they are the root cause of the issue. These are the primary CSS files that make up the overall Converse design.