How to Change the Font Size of the Name on the Profile Page (Mobile View)

Introduction

Adjusting the font size of the display name specifically for mobile view helps ensure readability and a clean layout across devices. While the BuddyBoss Theme does not offer a built-in setting for this, you can use a media query with custom CSS to target mobile screens.

Custom Workaround

To change the font size of the name on the profile page for mobile devices:

1. In your WordPress Dashboard, go to BuddyBoss > Theme Options.
   
2. Scroll to the Custom Codes section and toggle Enable CSS.
   

Append the following CSS code (adjust 50px to your preferred font size):

@media (max-width: 767px) {

  h2.user-nicename {

    font-size: 50px !important;

    /* Adjust the font size as needed */

  }

}

3. Click Save Changes.
   

Note: Any changes made using custom code are considered “custom work.” For additional details, refer to our Support Policy.

Troubleshooting and FAQs

Q: The font size didn’t update on mobile, what should I check?
A: Make sure you’re viewing the site on a screen that’s 767px wide or smaller. Clear your browser cache and ensure the CSS was saved properly.

Q: Will this affect the desktop layout?
A: No. The media query limits the change to mobile view only.

Q: Can I target other screen sizes like tablets?
A: Yes. You can modify the max-width value in the media query to suit different devices, such as 1024px for tablets.