-
Author
Tagged: buddypress, Formatting, activity
-
March 14, 2016 at 19:50 #110442
tmh23
ParticipantI have buddypress working great and formatted nicely on desktop but I can’t figure out how to fix the weird formatting that is happening on mobile/small screen. How can I get rid of the huge gaps that are happening. I’ve attached a screenshot to show you how I’d like the content moved over. It will really make the activity wall nice on mobile.
Thanks,
Troy
Attachments:
You must be logged in to view attached files.March 14, 2016 at 21:17 #110499Radu
ModeratorHi,
Please provide an account to can see the activity
Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionMarch 15, 2016 at 16:46 #110740Radu
ModeratorHi,
This is a part of css
COPY CODE@media only screen and (max-width: 600px) { #buddypress .activity-header { margin: 0 !important; } .activity-avatar.rounded { margin-right: 20px; } }
But i need access to wp-admin and FTP cuz some css that are in quick css and kleo child overwrites the new rules
Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionMarch 15, 2016 at 17:53 #110775tmh23
ParticipantAlso noticed another format thing that happened when I updated the theme and packaged plugins. I’ve attached a screen shot.
Troy
Attachments:
You must be logged in to view attached files.March 15, 2016 at 19:54 #110838tmh23
ParticipantThat CSS worked great for the activity header. Thanks.
Still hoping to move the post content down and over to use up the blank space.
Attached a screen shot.Also… I notice now that the contact link is not showing on small screen/mobile?
Troy
Attachments:
You must be logged in to view attached files.March 16, 2016 at 17:36 #110986Radu
ModeratorHi,
It’s done but please remove this from wp-admin -> theme options -> general settings -> quick css
COPY CODE#buddypress .activity-list .activity-content { margin: 0 0 0 100px !important; }
For the line from activity just add this css
COPY CODE#buddypress .activity-timeline {left:45px}
Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionMarch 16, 2016 at 18:13 #110998tmh23
ParticipantSo I am removing the first line of code above?
Where am I putting the second line??I’m a little confused. Sorry..
March 16, 2016 at 20:06 #111045Radu
ModeratorHi,
Yes remove this
COPY CODE#buddypress .activity-list .activity-content { margin: 0 0 0 100px !important; }
Then ad the end of the css file add this
COPY CODE#buddypress .activity-timeline {left:45px}
Cheers
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionMarch 16, 2016 at 20:08 #111046tmh23
ParticipantI got it it right! Works perfectly! You’re a genius.
I tried to add padding below the avatar so the text content of the post was spaced a little down but couldn’t get it to work. Where should I add padding to the bottom of the avatar?Attachments:
You must be logged in to view attached files.March 17, 2016 at 16:58 #111280Radu
ModeratorHi,
Use this
COPY CODE#buddypress .activity-list .activity-content .activity-inner, #buddypress .activity-list .activity-content blockquote { margin-top: 20px !important; }
Replace 20px with your desired value
Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionMarch 17, 2016 at 18:14 #111307tmh23
ParticipantGreat…. This works… however the small text that tells when the post was posted is wrapping the word ‘ago’ even though there is plenty of space for it. This is then spacing the distance to much. How can I keep the ‘ago’ from wrapping of small screens.
I’ve attached a screen shot.
Troy
Attachments:
You must be logged in to view attached files.March 17, 2016 at 19:34 #111347tmh23
ParticipantRadu,
Actually I see that the above code isn’t working to space it down. The space is actually happening with the word wrap of ‘ago’ as mentioned above. Perhaps you have a solution.
Thanks,
TroyMarch 18, 2016 at 12:33 #111490Radu
ModeratorHi
Use this
COPY CODE@media(max-width:700px){ #buddypress .activity-header p a:last-child { margin-right: 25% !important; } }
Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionMarch 21, 2016 at 17:24 #112001Radu
ModeratorGood
Have a nice week
Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionMarch 23, 2016 at 19:57 #112416tmh23
ParticipantHi Radu,
I opened this ticket back up as I noticed one other thing with the formatting and perhaps others can benefit.
The above code worked great and things are formatting perfectly, however I noticed when commenting on a post in the activity both on desktop and mobile the comment post is formatting weird. I’ve attached screen shots.
Perhaps you can help with similar css?
Thanks,
Troy
Attachments:
You must be logged in to view attached files.March 25, 2016 at 18:24 #112766Radu
ModeratorHI,
I need an account to comment
Cheers
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionMarch 25, 2016 at 18:53 #112773tmh23
ParticipantYou can create one free. Go to Join Now and choose the Tee Box Membership. Its FREE.
Troy
March 28, 2016 at 15:36 #113095Radu
ModeratorPlease provide a ready account please!
CheersHi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionMarch 29, 2016 at 15:41 #113251Radu
ModeratorHi,
Please use this css
COPY CODE#buddypress div.activity-comments ul li .acomment-content { margin-top: 25px; }
Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionMarch 29, 2016 at 19:00 #113346tmh23
ParticipantI see that this works for small screen and mobile but on a desktop browser window the issue is still there.
Attachments:
You must be logged in to view attached files.March 30, 2016 at 16:17 #113523Radu
ModeratorHi
The css rule it applies on both cases mobile and desktop,
Add the css with !important declaration
COPY CODE#buddypress div.activity-comments ul li .acomment-content { margin-top: 25px !important; }
Cheers
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionMarch 30, 2016 at 19:52 #113651tmh23
ParticipantThis is what I am still seeing for scaled screen and full screen with Firefox and Chrome browsers.
Is there something that is not letting the above CSS work?Troy
Attachments:
You must be logged in to view attached files.March 31, 2016 at 16:55 #113813Radu
ModeratorHi,
I think your have a media rule unclosed (see attachment)
Cheers
RaduHi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionAttachments:
You must be logged in to view attached files.March 31, 2016 at 18:30 #113871tmh23
ParticipantI’m not that familiar with coding… do I need to just remove this or do I need to add another one somewhere?
Haha! Sorry, I’m a rookie.Troy
April 1, 2016 at 15:33 #114089Radu
ModeratorOk,
Check the attached screenshot
Cheers
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionAttachments:
You must be logged in to view attached files.April 1, 2016 at 18:48 #114149tmh23
ParticipantThat seemed to work great!
Thank you again for great support.
Troy
April 4, 2016 at 17:11 #114429Radu
ModeratorYou’re welcome.
Thank you for the kind words
Cheers
Radu
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution -
AuthorPosts
The forum ‘General questions’ is closed to new topics and replies.