Bugs realm avatar Bugs realm home

Bugs

0 Characters Joined
Create Thread
Bugs | Posted by | 5 years, 5 months ago
Discussion

Avatar Themes CSS styles not okay for long usernames

Hi, I just wanted to point out that the CSS style used for the Avatar Theme is not okay when the username is long.

Currently, it is set to "left: -2px;" but it should be "left: 50%; margin-left: -92.5px;" instead. Just saying 😅

https://css-tricks.com/forums/topic/horizontal-centering-of-an-absolute-element/

EDIT: Forgot to mention that it occurs on the member page like https://outof.cards/members/[USERNAME]/

3 Share

// join_the_conversation

Sign in to share your thoughts, vote on comments, and connect with the community.

Sign in Create account

Comments

Sort by:
Oldest Newest Top

  • Hi, I just wanted to point out that the CSS style used for the Avatar Theme is not okay when the username is long.

    Currently, it is set to "left: -2px;" but it should be "left: 50%; margin-left: -92.5px;" instead. Just saying 😅

    https://css-tricks.com/forums/topic/horizontal-centering-of-an-absolute-element/

    EDIT: Forgot to mention that it occurs on the member page like https://outof.cards/members/[USERNAME]/

  • In this case, the better way of doing it is:

    left: 50%;
    transform: translate(-50%);

    It was prior understanding these boxes were fixed width and name text was supposed to make itself smaller if it would go out of bounds. Regardless, I should have used better CSS to begin with.

    Thanks for the report!

     

  • You are welcome! 🎃