This tutorial shows how to center the user profile pop-up (UserCard) on mobile screens in FreeFlarum, so it no longer appears stuck to the right side or partially off-screen.
What this fixes
Centers the user profile pop-up on mobile
Removes unnecessary scrolling
Prevents the “big grey
slab” eff
ect
Does not affect navigation, menus, or desktop layout
Works on
FreeFlarum / Flarum forums
User profile pop-ups (avatar tap, 3-dot menu)
Mobile screens only (650px wide or less)
Step-by-step instructions
1️⃣ Open your FreeFlarum Admin Panel
Go to:
Admin → Appearance → Custom CSS
2️⃣ Scroll to the bottom
Always place layout-override CSS at the very bottom so it safely overrides the theme.
3️⃣ Paste this code
@media(max-width:650px){ /* Center the user profile popover */
.Popover--user,
.UserCard--popover{
position:fixed!important;
left:50%!important;
right:auto!important;
top:90px!important;
transform:translateX(-50%)!important;
margin:0!important;
max-width:calc(100vw - 24px)!important;
width:calc(100vw - 24px)!important;
}
/* Ensure clean sizing (no forced scroll / no big slab) */
.UserCard,
.UserCard--popover,
.Popover-content{
height:auto!important;
max-height:none!important;
overflow:visible!important;
}
}
4️⃣ Save and test
Expected result
The user profile pop-up opens centered on the screen
All content is visible without scrolling
No layout issues elsewhere on the site
Why this works
position: fixed removes anchor-based positioning
left: 50% + translateX(-50%) ensures true centering
Auto height prevents unnecessary empty space
Media query keeps the fix mobile-only
Done
This is the cleanest CSS-only solution for centering the Flarum user profile pop-up on mobile.
You’re good to go 💖
