Mobile: display error on Buddypress members page (when logged in)

[GenevieveLeJeune]

When viewing my Buddypress members page on a mobile (specifically iPhone 5 in portrait view), I have a display problem with the ‘Add friend’ or ‘Private Message’ buttons appear outside of each members ‘box’.

This problem disappears when I view the site in landscape on the same phone.

I also tested the KLEO demo site and it gets the same display issue. You only notice this when you are logged in and have the additional buttons below each member.

Is this a known display issue?

[GenevieveLeJeune]

I should add: this is in masonry view.

[Laura]

Hello, can you share a link and an account to test it? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[GenevieveLeJeune]

Hi Laura, actually the easiest example is to look at the Kleo community demo:
http://seventhqueen.com/themes/kleo/buddypress-members/

If you’re logged into the demo site and viewing on an iPhone 5 you will see what I mean.

[Abe]

Hi, this is how it looks. see the attach

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

Attachments:

You must be logged in to view attached files.

[Abe]

Oh I just saw it. Fixing it and letting you know

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Robert]

Hi @GenevieveLeJeune, I’ve just fixed this and will be available with next update. Until then you can put these lines in theme options (quick css box):

COPY CODE

#buddypress #friend-list .friend-inner-list,
#buddypress #member-list .member-inner-list,
#buddypress #members-list .member-inner-list {
	display: inline-block;
	width: 100%;
}
@media only screen and (max-width: 320px) {
	#buddypress ul.item-list li div.action {
		float: none;
		margin-left: auto;
	}
}

Best regards,
Robert

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Robert - Front-end developer and UI graphics enthusiast.

[GenevieveLeJeune]

Great, thanks. That fixes the problem.

[Author]

Posts