Skip to content

Instantly share code, notes, and snippets.

@nicosabena
Created November 6, 2020 23:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nicosabena/0ad3ce1107dfcbe436c21789b46fe60c to your computer and use it in GitHub Desktop.
Save nicosabena/0ad3ce1107dfcbe436c21789b46fe60c to your computer and use it in GitHub Desktop.
Decrease Lock's header for mobile devices in HLP
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sign In with Auth0</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<style type="text/css">
/* completely hide the header
@media screen and (max-width: 480px) {
.auth0-lock .auth0-lock-header {
display: none !important;
}
.auth0-lock-content-body-wrapper {
margin-top: 0px !important;
}
}
*/
/* make the header smaller by removing the image
* and decreasing the text size */
@media screen and (max-width: 480px) {
.auth0-lock .auth0-lock-header-logo {
display: none !important;
}
.auth0-lock div.auth0-lock-header {
padding: 1px !important;
}
.auth0-lock .auth0-lock-name {
font-size: 14px !important;
}
.auth0-lock-content-body-wrapper {
margin-top: 36px !important;
}
}
</style>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment