How to Adjust the Login Page Width

Introduction

BuddyBoss uses the default WordPress login page width. You can adjust the login page width by adding a small custom function to your active theme. This ensures the login form fits your design or improves usability. This guide explains how to adjust the login page width.

Custom Workaround

Before proceeding, make sure you have a complete site backup.

  1. Navigate to Appearance > Theme Editor in your WordPress admin dashboard
  2. Under Select theme to edit, choose your active theme (preferably BuddyBoss Child Theme), then click Select
  3. From the Theme Files list, open Theme Functions (functions.php)
  4. Add the following code just before the closing PHP tag (?>):
function custom_login_logo() {

    echo '<style> 

        body.login.login-split-page #login { 

            width: 370px; 

        } 

    </style>';

}

add_action('login_head', 'custom_login_logo');
  1. Click Update File to save the changes

Note: Modifications are typically considered custom work, but we are making an exception in this case. Please review the BuddyBoss Support Policy.

Troubleshooting and FAQs

Q: The login width did not change
A: Clear your browser cache and any caching plugins, then refresh the login page

Q: Can I use a different width
A: Yes. Replace 370px with your preferred width in the code

Q: Will this affect mobile login layouts
A: No. The code targets desktop login pages; mobile layouts remain unchanged

Was this article helpful?

Related Articles

Subscribe to Our Newsletter

Stay In Touch

Subscribe to our Newsletter, and we’ll send you the latest news from BuddyBoss

  • This field is hidden when viewing the form
  • This field is for validation purposes and should be left unchanged.

To speak to our Agency consultant, fill in the form found at our Contact Page.

  • Get Started

    Enter your name and email address to get started with your project...

  • This field is for validation purposes and should be left unchanged.