Changing the Width of Forms

Theme My Login forms take their width from your theme. To set a width yourself, add a max-width rule for the form container in Additional CSS.

Where to Add the CSS

In a classic theme, go to Appearance → Customize → Additional CSS. In a block theme, go to Appearance → Editor → Styles, open the options menu and choose Additional CSS.

Either location keeps the rule with your site rather than in a plugin, so it survives Theme My Login updates.

Changing Every Form

Every Theme My Login form sits inside an element carrying the tml class, so a single rule covers all of them:

.tml {
	margin: 0 auto;
	max-width: 400px;
}

The margin line centers the form in the space your theme gives it. Leave that line out if you would rather the form stayed aligned to the left.

If the Width Does Not Change

Some themes set their own content width with a more specific rule, which wins over the one above no matter where you put it. Twenty Twenty-One is one of them. If your form stays the width it was, add !important to both lines:

.tml {
	margin: 0 auto !important;
	max-width: 400px !important;
}

Changing a Single Form

Each form also carries a class naming its action, so you can set a width for one form without touching the others:

.tml-login {
	max-width: 400px;
}

The available classes are tml-login, tml-register, tml-lostpassword, tml-resetpass and tml-dashboard.

Why There Is No Width Setting

Width is a layout decision, so Theme My Login leaves it to your theme instead of overriding it. Your forms then match the content width of the rest of your site by default, and the CSS above takes effect without having to override a plugin setting.