diff --git a/themes/src/main/resources/theme/base/login/login-config-totp.ftl b/themes/src/main/resources/theme/base/login/login-config-totp.ftl
index 914ecb5..0515c27 100755
--- a/themes/src/main/resources/theme/base/login/login-config-totp.ftl
+++ b/themes/src/main/resources/theme/base/login/login-config-totp.ftl
@@ -11,7 +11,7 @@
</li>
<li>
<p>${msg("loginTotpStep2")}</p>
- <img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"><br/>
+ <img id="kc-totp-secret-qr-code" src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"><br/>
<span class="code">${totp.totpSecretEncoded}</span>
</li>
<li>
diff --git a/themes/src/main/resources/theme/keycloak/login/resources/css/login.css b/themes/src/main/resources/theme/keycloak/login/resources/css/login.css
index 7b202e1..bbf08af 100644
--- a/themes/src/main/resources/theme/keycloak/login/resources/css/login.css
+++ b/themes/src/main/resources/theme/keycloak/login/resources/css/login.css
@@ -152,6 +152,11 @@ ol#kc-totp-settings li:first-of-type {
margin-top: 0;
}
+#kc-totp-secret-qr-code {
+ max-width:150px;
+ max-height:150px;
+}
+
/* OAuth */
#kc-oauth h3 {
@@ -244,18 +249,6 @@ ol#kc-totp-settings li:first-of-type {
.zocial.microsoft {background-color: #0052a4; color: #fff;}
.zocial.microsoft:before { content: "\f15d"; }
-@media (min-width: 1281px) {
- #kc-container-wrapper {
- bottom: 13%;
- }
-
- #kc-logo-wrapper {
- position: absolute;
- top: 50px;
- right: 50px;
- }
-}
-
@media (min-width: 768px) {
#kc-container-wrapper {
position: absolute;
@@ -326,7 +319,13 @@ ol#kc-totp-settings li:first-of-type {
}
}
-@media (max-height: 500px) {
+@media (min-height: 621px) {
+ #kc-container-wrapper {
+ bottom: 12%;
+ }
+}
+
+@media (max-height: 620px) {
#kc-container-wrapper {
}
}