The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Mobile version Avatars not aligning

View previous topic View next topic Go down

Solved Mobile version Avatars not aligning

Post by troyeccles on May 15th 2016, 3:28 pm

Hi,

I've added the ability to display avatars on the mobile version of my forum.
Some look aligned properly. Most don't! They're either off to one side or the top.

I've not yet enabled the mobile version on my forum until I've got it right on the test forum (http://tbartest.forumotion.com/t2p50-test-topic). You can see the affect there.

The code I've used in the CSS is this:
Code:
.avatarMobile {
  background:#EDEDED;
  border:1px solid #555;
  border-radius:40px;
  height:40px;
  width:40px;
  display:inline-block;
  vertical-align:bottom;
  margin-bottom:-0.1em;
  overflow:hidden;
}
 
.avatarMobile img {
  max-width:40px;
  max-height:40px;

Anyone help? If the avatars are the wrong dimensions, is there a way of aligning them centrally so if there is a white space, it's at the top AND bottom (or both sides) rather than doing what it's doing now?


Last edited by troyeccles on May 18th 2016, 2:46 am; edited 1 time in total

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

Solved Re: Mobile version Avatars not aligning

Post by Van-Helsing on May 15th 2016, 4:05 pm

Hello,
Try this code:

Code:

        .avatarMobile {
          background:#EDEDED;
          border:1px solid #555;
          border-radius:40px;
          height:40px;
          width:40px;
          display:inline-block;
          vertical-align:bottom;
          margin-bottom:-0.1em;
          overflow:hidden;
          position: relative;
        }
       
        .avatarMobile img {
          max-width:40px;
          max-height:40px;

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Mobile version Avatars not aligning

Post by troyeccles on May 15th 2016, 5:14 pm

I can see the line you've added there and that made sense but....it's had no effect. I've cleared my cache thinking that might help but no.

Any other ideas?

Thanks BTW!

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

Solved Re: Mobile version Avatars not aligning

Post by Ange Tuteur on May 16th 2016, 5:14 pm

Hi @troyeccles,

Find this property:value pair in your style rule :
Code:
vertical-align:bottom;

and replace it with this :
Code:
vertical-align:-15px;
Adjust the -15px to change the vertical alignment of the avatar. Wink

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Mobile version Avatars not aligning

Post by troyeccles on May 17th 2016, 2:27 am

Hi @Ange Tuteur

Thanks for your efforts but no good.
I tired to vary the -15 number wildly and also tried :bottom. No change.
Whatever variable I use, I still get this...



Top avatar is aligned to the top.
2nd avatar is hard to tell but it's aligned to the top and to the left (there's white space at right and bottom).
3rd avatar is also aligned to the top.

They don't move!

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

Solved Re: Mobile version Avatars not aligning

Post by troyeccles on May 17th 2016, 2:30 am

Maybe the complete code will help you?

Code:
.avatarMobile {
          background:#EDEDED;
          border:1px solid #555;
          border-radius:40px;
          height:40px;
          width:40px;
          display:inline-block;
          vertical-align:-15px;
          margin-bottom:-0.1em;
          overflow:hidden;
          position: relative;
        }
     
        .avatarMobile img {
          max-width:40px;
          max-height:40px;
}

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

Solved Re: Mobile version Avatars not aligning

Post by troyeccles on May 17th 2016, 2:42 am



I'm so sorry. We seem to be talking about two different things here.

My fault for not explaining myself properly. It's not the avatar holder that's out of position, it's the image within it.

Now, I moved the vertical-align:-15px; to the img section and that works (kind of).
Because all the avatars are different sizes, -15 puts some in the middle but not others. I've tried vertical-align:center but that does nothing.
horizontal-align doesn't seem to work either.

I'd like it so if a user has a fairly standard-size avatar, it sits in the middle of the avatar placeholder.
If they have a HUGE avatar, it resizes it and, again, sits in the middle of the place-holder (if it's a panoramic style image that's REALLY wide then it'll have to have strip of white at top and bottom (no big deal)).


troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

Solved Re: Mobile version Avatars not aligning

Post by Ange Tuteur on May 17th 2016, 5:37 pm

Ooooh I see what you mean. Since the avatar container is set to 40px X and Y you should do the same for the image. That is replace this :
Code:
        .avatarMobile img {
          max-width:40px;
          max-height:40px;
}

With this :
Code:
.avatarMobile img {
  width:40px;
  height:40px;
}

max- doesn't place the element at the exact dimensions you specify, in fact it's usually less than what's specified. So it's better to choose an exact value for avatars otherwise they'll display differently due to their varying dimensions.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Mobile version Avatars not aligning

Post by troyeccles on May 18th 2016, 2:45 am

That's it!

Thank you once again, Ange! Brilliant stuff.

Solved.

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

Solved Re: Mobile version Avatars not aligning

Post by SLGray on May 18th 2016, 6:37 am

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35670
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum