I am trying to solve several UI issues on the mobile site. I am testing using iOS 6, on an iPhone 5.

1) When a user profile is viewed, only the last name is visible. Going to this profile on the mobile site only shows "Endee" as this user's name…it does not show the first name. (see attached)

2) When viewing a user profile on the mobile site, and not logged in, clicking on the "Add as Friend" button on the cover photo brings up a 'chopped off' login box, with the password field and login button completely hidden. (see attached) I'm not sure why this login window is any different than the one you get when you click the "Send a Message" button directly above the first button. Clicking the "Send a Message" button gives a completely functional login window. Why would one login window be different than the other?

3) When viewing the Jomsocial "get connected" page on the mobile site, the username, password, and login buttons are all smashed together in an unusable state.

Can you please point me in the right direction to get these mobile issues fixed? I was under the impression Jomsocial 3 was mobile friendly, but it seems like there are some additional tweaks I will have to do before my site is 100% mobile friendly.

Thanks in advance!

Hello Josh

Most (if not all) of these ssues came from your Joomla template

Please try this link and see if you can replicate the same thing saltwaterguidenetwork.biz/index.php/joms...ofile/?template=none

Thanks

Hi Sinisa. Thanks for pointing that out, and for showing me how to view the site without a template applied. It looks like issue #1 and #3 are definitely caused by my Joomla template. However issue #2 is still present without a template applied.

If you follow these steps, you can see the problem:

-Go here: saltwaterguidenetwork.biz/index.php/joms...ofile/?template=none

-Click on "Send Message"…a normal size login box appears. Cancel out of that box.

-Click on "Add as Friend"…a chopped off login box appears. Why is that? Why is one login box different than the other?

Hi Josh

Please take a look here (not a solution, yet)
www.jomsocial.com/forum/profile-universa...riend-requests#61360

I dug into the code and figured out a fix myself. Posted my findings in that other thread.

Thanks Sinisa.

HI Sinisa. It turns out that issue #1 from my original post is also NOT related to my template. It does the same thing in the "no template" mode. I think this is a bug, and definitely worth reporting. I would love to know if there is a fix for this.

As you can see from the first two attachments, on my iPhone in vertical mode, only the user's last name is showing on his profile. When I tilt the phone into horizontal (portrait) mode, the full user name is displayed. This happens with every user on my site. Here is a URL you can test with: http://saltwaterguidenetwork.biz/index.php/jomsocial/342-captain-barry-deschamps/profile/?template=none

I have experimented with the same page in Firefox using "responsive design view" mode. When the horizontal size of the window shrinks down to around 332 pixels, that's then the layout collapses and pushes the first name up above the frame of the cover photo and it disappears. (Screen shots attached.)

This is a pretty big deal considering Jomsocial is concentrating on responsive design and making a big effort to be mobile-friendly. If my iPhone users can only see last names and no first names, that's not a very mobile friendly experience yet.

Thanks for working on this. This is one of the last few issues I need to solve before launching a brand new "mobile friendly" version of my JomSocial site.

Josh-

I can see what you mean by it by testing the given url in the firefox responsive mode (ctrl+shift+m) and the sole reason why it is happening is because there are way to many elements to be displayed on the page. If add friend and send message buttons would be displayed elsewhere or not displayed at all, the space for accomodating long names will be bigger and hence the full name will be shown

Try adding this to any CSS file loaded at that page

#community-wrap .js-focus-header .span4 .btn {
    display: none;
}