Skip to content

Instantly share code, notes, and snippets.

@cubistcastle
Last active December 28, 2015 08:39
Show Gist options
  • Save cubistcastle/7472795 to your computer and use it in GitHub Desktop.
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.
/* --------------------------------------------------------------------------------------
## 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