Buddypress layout on mobile/small screen.

[tmh23]

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

 

Attachments:

You must be logged in to view attached files.

[Radu]

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 solution

What support service includes ? What not ?

[tmh23]

You can view the activity without an account.

http://www.parttimegolf.com/activity

[Radu]

Hi,

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 solution

What support service includes ? What not ?

[tmh23]

This reply has been set as private.

[tmh23]

Also 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.

[tmh23]

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

Attachments:

You must be logged in to view attached files.

[Radu]

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 solution

What support service includes ? What not ?

[tmh23]

So I am removing the first line of code above?
Where am I putting the second line??

I’m a little confused. Sorry..

[Radu]

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 solution

What support service includes ? What not ?

[tmh23]

I 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.

[Radu]

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 solution

What support service includes ? What not ?

[tmh23]

Great…. 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.

[tmh23]

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,
Troy

[Radu]

Hi

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 solution

What support service includes ? What not ?

[tmh23]

Thanks. That worked perfectly!!

Troy

[Radu]

Good

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 solution

What support service includes ? What not ?

[tmh23]

Hi 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.

[Radu]

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 solution

What support service includes ? What not ?

[tmh23]

You can create one free.  Go to Join Now and choose the Tee Box Membership.  Its FREE.

 

Troy

 

[Radu]

Please provide a ready account please!
Cheers

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

What support service includes ? What not ?

[tmh23]

This reply has been set as private.

[Radu]

Hi,

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 solution

What support service includes ? What not ?

[tmh23]

I 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.

[Radu]

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 solution

What support service includes ? What not ?

[tmh23]

This 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.

[Radu]

Hi,

I think your have a media rule unclosed (see attachment)

Cheers
Radu

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

What support service includes ? What not ?

Attachments:

You must be logged in to view attached files.

[tmh23]

I’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

[Radu]

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 solution

What support service includes ? What not ?

Attachments:

You must be logged in to view attached files.

[tmh23]

That seemed to work great!

Thank you again for great support.

Troy

[Radu]

You’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

What support service includes ? What not ?

[Author]

Posts