Problem statement
When using a custom logo for one of our applications, as explained in the Auth0 documentation Customize New Univeral Login Pages - CSS Customization, there are issues with the height of the logo.
Once the custom logo is specified by adding class=“_use-custom-prompt-logo” in the element, the height that is set in the No-code customization options in the Dashboard is not applied anymore. The height appears to be hardcoded to 60px.
Troubleshooting
Here’s the HTML from the element with id=“custom-prompt-logo”:
<div title="My Test Tenant" id="custom-prompt-logo" style="width: auto !important; height: 60px !important; position: static !important; margin: auto !important; padding: 0 !important; background-color: transparent !important; background-position: center !important; background-size: contain !important; background-repeat: no-repeat !important"></div>
Because of the !important
tags, it’s not possible to set the height for that element id.
Cause
Due to the !important
tags, within the HTML for the element, it is not possible to set the height for that element id. There is a backlog item to fix this.
Solution
We recommend using the max-height to set a smaller height or min-height to set a height above 60px, like in this example:
#custom-prompt-logo {
background-image: url('https://cdn.auth0.com/blog/auth0rta/theme/logos/auth0-logo-black.png';);
min-height: 80px;
}