search

tranduyhung / grav-skeleton-big-picture

Big Picture skeleton for Grav CMS
MIT License
8 stars 8 forks source link

Header Navigation Bar Overlaps Converse.js On Mobile #2

Closed variablenix closed 8 years ago

variablenix commented 8 years ago

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.

screenshot_2016-08-09-03-57-53

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.

tranduyhung commented 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.

variablenix commented 8 years ago

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.

tranduyhung commented 8 years ago

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.

variablenix commented 8 years ago

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!