Last active
December 28, 2015 08:39
-
-
Save cubistcastle/7472795 to your computer and use it in GitHub Desktop.
Zendesk's Feedback Tab doesn't work so well on mobile. Here's a quick way to make it's modal dialog box play a little nicer.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* -------------------------------------------------------------------------------------- | |
## Add these styles to your zendesk dropbox custom css (/agent/#/admin/dropboxes) | |
----------------------------------------------------------------------------------------*/ | |
#zenbox_container { | |
height: 620px; | |
margin: 0 auto; | |
position: relative; | |
text-align: left; | |
width: 100%; | |
z-index:2; | |
} | |
body { | |
min-width:100%; | |
} | |
/* prevent zooming on focus */ | |
input[type='text'], | |
input[type='number'], | |
textarea { | |
font-size:16px; | |
} | |
/* -------------------------------------------------------------------------------------- | |
## Add these styles to the site/page where the tab will be located | |
----------------------------------------------------------------------------------------*/ | |
#zenbox_body { | |
max-width:100%!important; | |
} | |
@media only screen | |
and (max-width : 638px) { | |
#zenbox_container { | |
width:100%!important; | |
} | |
} | |
/* -------------------------------------------------------------------------------------- | |
## If you have problems with your CMS stripping out Zendesk's inline styles, you | |
might need something like this | |
----------------------------------------------------------------------------------------*/ | |
#zenbox_tab { | |
background-color: #00A4E4; | |
border: 1px solid #00A4E4!important; | |
-webkit-transition: all 0.2s ease-in; | |
-moz-transition: all 0.05s ease-in; | |
transition: all 0.2s ease-in; | |
} | |
#zenbox_tab:hover { | |
background-color: #1690C0!important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment