How to Increase the Login Page Image Height for Mobile View in BuddyBoss

Introduction

By default, BuddyBoss does not provide a built-in option to adjust the height of the login page image specifically for mobile devices. If the image appears too short on smaller screens, you can customize its height using a simple function and CSS. This guide explains how you can increase the login page image height for mobile view in BuddyBoss.

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

Custom Workaround

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

1. Go 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, click Theme Functions (functions.php).
   
4. Paste the following code just before the closing PHP tag (?>):
   

function the_boss_custom_login_css() {
    echo '<style type="text/css">
        @media (max-width: 544px){
            body.login.login-split-page .login-split .login-split__entry {
                height: 275px;
            }
        }
    </style>';
}
add_action( 'login_enqueue_scripts', 'the_boss_custom_login_css' );

You can change 275px to your preferred height, such as 400px.

5. Click Update File to save your 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 image height didn’t change on mobile.
A: Clear your browser cache and any caching plugin, then reload the login page on a mobile device.

Q: Can I use a different height value?
A: Yes. Update the height value in the CSS to any pixel value you prefer.

Q: Will this affect the desktop login page?
A: No. The function applies only to screens with a maximum width of 544px (mobile view).

Q: Can I revert this change easily?
A: Yes. Remove the code from functions.php and save the file.

Q: Who can I contact for further assistance?
A: Please review the BuddyBoss Support Policy or consult a developer.