916833 - Avatar not centered in mobile profile view

Status: VERIFIED FIXED

(Participation Infrastructure :: Phonebook, defect)

Description

[Giorgos Logiotatidis [:giorgos]]

On android / firefox the avatar is not centered in profile view.

Comment 1

[Justin Crawford [:hoosteeno] [:jcrawford]]

Attachment: The avatar is not centered

Attachment shows the avatar is not centered. If it was centered, the highest part of the avatar would be under the "n" of "Mozillian Profile", but instead it's under the "r". So it's about 10% or 15% more right than it should be.

Comment 2

[Scott Lee [:pancakes9]]

I played around with the CSS and it looks more centered now. Let me know what you think.

https://github.com/mozilla/mozillians/pull/972

Comment 3

[Wray Bowling [:wbowling]]

There are a lot of breakpoints in the CSS. The solution to centering something in CSS is to give it automatic side margins. If you keep adjusting a left-side offset as a percentage of the container's width when the size of the image is not defined also by a percentage then it will always be off-center.

I'm seeing if I can rewrite it.

Comment 4

[Scott Lee [:pancakes9]]

Assigned to wbowling since he has a fix.

Comment 5

[[github robot]]

Commit pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/27b93070217e099bb59a436f1ee0e17ad5092d65
[fix bug 916833] Fix centering for profile image.

Comment 6

[Matt Brandt [:mbrandt]]

QA verified on stage - profile image appears centered
- Android 4.4.4 Firefox for Android & Chrome
- iOS latest [iPod touch] Safari
- Firefox OS latest