Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.
If you’re using LearnDash’s login modal, you might feel as though it’s a bit too wide. If you aren’t also using the free registration part of the modal, then the login form takes up a lot of space on the screen.
This super-quick tutorial will show you how to shrink the size of the login modal popup window. You’ll be able to customize the CSS to whatever width you want to use.
By default, the LearnDash login modal is set to 80% width. This means it will take up 80% of whatever the screen size of the visitor. On larger screens, this will mean 1000px or more. It might look something like this:
That’s way more space than we need. Let’s reduce its width and make it look more like a normal popup window.
The CSS
Add this CSS to the Appearance > Customize > Additional CSS panel in the WordPress admin area. You can adjust the width as you see fit. I think 550px
looks really nice.
.learndash-wrapper .ld-login-modal {
max-width: 550px;
}
Upgrade the Entire Design
If you want to take things a step further, you can upgrade the entire design of the LearnDash login modal (registration panel, too) with our Design Upgrade Pro for LearnDash plugin.
You can change background colors, text colors, the close icon, input color, remove the login login, remove some of the description text AND add a background overlay to the page behind the modal. Here’s an example of how we spiced it up with Design Upgrade Pro for LearnDash.
Sponsor
Finally Revealed...
NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and revenue per student by creating a state of the art mobile application in UNDER 60 MINUTES without ANY coding knowledge!
Proven and tested by over 1,000 LearnDash customers.
Get your LearnDash Mobile App →
Leave a Reply