This topic has 30 replies, 2 voices, and was last updated 8 years by 
-
-
I 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
Hi,
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 solutionHi,
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 solutionAlso noticed another format thing that happened when I updated the theme and packaged plugins. I’ve attached a screen shot.
Troy
That 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
Hi,
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 solutionSo I am removing the first line of code above?
Where am I putting the second line??I’m a little confused. Sorry..
Hi,
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 solutionI 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?Hi,
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 solutionGreat…. 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
Radu,
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,
TroyHi
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 solutionGood
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 solutionHi 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
HI,
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 solutionPlease 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 solutionHi,
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 solutionI see that this works for small screen and mobile but on a desktop browser window the issue is still there.
Hi
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 solutionThis 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
Hi,
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 solutionI’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
Ok,
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 solutionYou’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
The forum ‘General questions’ is closed to new topics and replies.
