Hi,
I have some code that I used to move the SSO button to the top of the login page
The issue I am running into is if I expand the width of the SSO button - it displaces the Sign in Text
![](https://uploads-eu-west-1.insided.com/docebosuccess-en/attachment/8ec588bf-c497-44ae-9286-61f9b78d7c34.png)
I’d like to keep the Sign in Text above the SSO button because I plan to replace it
![](https://uploads-eu-west-1.insided.com/docebosuccess-en/attachment/90be72be-873e-4372-a9df-fa4521658043.png)
This is the code I am using
/*CSS to Flip the Login Page*/
#doc-layout-login form {
display: flex;
flex-wrap: wrap;
}
#doc-layout-login h1.login-form-title.hyd-typography-heading-2 {
order: -3;
}
#doc-layout-login p.login-form-subtitle.hyd-typography-subtitle.hyd-color-typography-secondary {
order: -2;
font-weight: bold;
font-size: 15px;
}
#doc-layout-login ui-input-text.login-field-username {
border-top: 1px solid #dbdbdb;
border-right: 1px solid #dbdbdb;
border-left: 1px solid #dbdbdb;
padding: 8px;
}
#doc-layout-login ui-input-password {
width: 100%;
padding: 8px;
border-left: 1px solid #dbdbdb;
border-right: 1px solid #dbdbdb;
}
#doc-layout-login ui-input-checkbox.login-field-remember-me {
width: 100%;
padding: 8px;
border-left: 1px solid #dbdbdb;
border-right: 1px solid #dbdbdb;
}
#doc-layout-login .form-button.login-button.ng-star-inserted {
border-right: 1px solid #dbdbdb;
border-left: 1px solid #dbdbdb;
padding: 8px;
width: 100%;
}
#doc-layout-login .forgot-password {
width: 100%;
padding: 8px;
margin-top: 0px !important ;
border-left: 1px solid #dbdbdb;
border-right: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
}
#doc-layout-login .sso-buttons {
order: -1 !important;
margin: 50px 0px;
}
Best answer by alekwo
View original