0
Bugs • Posted by • Created 5 years, 1 month ago • Updated 5 years, 1 month ago
Discussion
3 comments 177 views

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]/

Comments

  • 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! 🎃

Leave a Comment

You must be signed in to leave a comment. Sign in here.