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:

LearnDash login modal, by default, really wide

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.

Improved design of LearnDash login modal

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and SELL more courses by creating a state of the art mobile application in 60 MINUTES OR LESS without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Learn More →