Mobile Support

[JohnMcLear]

Is there any active work on better support for mobile devices?

[JohnMcLear]

CSS I ended up using

@media all and (max-width: 400px){
  #gritter-notice-wrapper{
    max-height:172px;
    overflow:hidden;
    width:100% !important;
    background-color: #ccc;
    bottom:20px;
    left:0px;
    right:0px;
    color:#000;
  } 
  .gritter-close {
    display:block !important;
    left: auto !important;
    right:5px;
  }
  #gritter-notice-wrapper.bottom-right{
    left:0px !important;
    bottom:30px !important;
    right:0px !important;
  }
  .gritter-item p{
    color:black;
    font-size:16px;
  }
  .gritter-title{
    text-shadow: none !important;
    color:black;
  }
  .gritter-item{
    padding:2px 11px 8px 4px;
  }
  .gritter-item-wrapper{
    margin:0;
  }
  .gritter-item-wrapper > div{
    background: none;
  }

It's obviously pretty hacky because of the !important's -- perhaps you can craft it in cleaner or perhaps @0ip can

I also found that the animations are a bit jerky on mobile, any chance of a way of overriding these?

[jboesch]

Mobile support is something I will work on when I have more time. Animations should use webkit animations instead of JavaScript animations.

[matheo]

This is still an issue?

[JohnMcLear]

Well I did a ghetto CSS hack that should really be adopted upstream, so it's up to the project maintainer really :)

[kpx-dev]

@JohnMcLear please issue a PR, I'll help CR and merge

[JohnMcLear]

https://github.com/jboesch/Gritter/pull/60

[7shifts]

@kienpham2000 Thank you! :)