Limit the Width of the LearnDash Login Modal

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.