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.
- Go to Appearance > Theme Editor in your WordPress admin dashboard.
- Under Select theme to edit, choose your active theme (preferably BuddyBoss Child Theme), then click Select.
- From the Theme Files list, click Theme Functions (functions.php).
- 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.
- Click Update File to save your changes.
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.
