Suggestion Activity feed image overlap fix

Hi,

This issue has been bugging me since the day I discovered it and I decided to post a fix, because... why not?

I use my activity feed to check out what my two friends are up to
As you can see:



The avatars are too big for the pre-set limit and they "overflow".

A simple fix would be to remove the limit like so:



To fix it: under the CSS file, make these changes:

ORIGINAL:
li.activitybit .avatar {
float:left;
padding-right:10px;
width: 75px;
}

FIX:
li.activitybit .avatar {
float:left;
padding-right:10px;
/* width: 75px; */
}


And after those changes, it looks like this!:


And if you were wondering, it works for longer names, thread titles, and replies as well as you can see:



I hope you will get to implement this because it's a relatively fast and easy fix.

Edit:
This one fix will also affect the forum-wide Link Outdated / Removed as well!

Thank you! I was going to mention that before and I forgot, I use the what's new section a lot and it always bugs me.

I know the problem is there, but I have no clue what you're talking about

Chayton, I need your help I think, in easy English

Tirilej said:

I know the problem is there, but I have no clue what you're talking about

Chayton, I need your help I think, in easy English

Click to expand...

The OP is posting the fix for the CSS file for Bryan to fix that problem with the text over the bigger avatars.

You could do it yourself like the OP did using Chrome or Firefox development tools but you'd have to do it every time you visit the page, because the CSS reloads. If Bryan fixes it, it will work for everyone and we don't have to worry our pretty little heads about it.

chayton said:

The OP is posting the fix for the CSS file for Bryan to fix that problem with the text over the bigger avatars.

You could do it yourself like the OP did using Chrome or Firefox development tools but you'd have to do it every time you visit the page, because the CSS reloads. If Bryan fixes it, it will work for everyone and we don't have to worry our pretty little heads about it.

Click to expand...

Thank you thank you:notworthy:notworthy

My head gets overloaded sometimes...especially when I see a post like his.

I trust you, and Bryan that he fix it without my head getting involved

What this "air head" does, knowing that the large avatars usually belong to CM, KK, maxd and Vinyl (who are longtime members with valuable things to say) just click the "see more" highlighted link at the bottom of the post. That takes you to the actual post where you can read the whole post (and the posts before and after) without the tedious :notworthy large avatar in the way.

Anyway that's what this air head does, without having to remember all that brain-taxing code.

chayton said:

Thank you! I was going to mention that before and I forgot, I use the what's new section a lot and it always bugs me.

Click to expand...

Yeah! I hope Bryan will consider looking into it

Tirilej said:

I know the problem is there, but I have no clue what you're talking about

Chayton, I need your help I think, in easy English

Click to expand...

chayton said:

The OP is posting the fix for the CSS file for Bryan to fix that problem with the text over the bigger avatars.

You could do it yourself like the OP did using Chrome or Firefox development tools but you'd have to do it every time you visit the page, because the CSS reloads. If Bryan fixes it, it will work for everyone and we don't have to worry our pretty little heads about it.

Click to expand...

So the "CSS" file makes all the styles happen on a website. The size of the fonts, colors, how big the buttons are, borders, everything! If a website was not using CSS, it would look like a white page with black text.
In this case, I used the Chrome developer console tool to look at the CSS of this website (specifically, the avatar section) and tried to find what was causing the overlap. I simply disabled the limit of the width so the text next to the image would move accordingly instead of starting at the 75th pixel. With this fix, the text will start wherever - on the 75th pixel, 76, 150, etc.

And regarding the tool I used - I can only edit it on my side but it will not save. If Bryan were to edit the CSS file on the server and saved it, it would make a permanent change I hope I helped you understand how it works.

Thanks! Looks like it worked. That overlap always bugged me, but I never had the time to try and fix it. Thanks for posting a quick fix.

Casinomeister said:

Thanks! Looks like it worked. That overlap always bugged me, but I never had the time to try and fix it. Thanks for posting a quick fix.

Click to expand...

Thank you for implementing it!

NetEntFollower said:

Thank you for implementing it!

Click to expand...

Big thank you NetEntFollower (we have got to come up with a nickname for you) for fixing the overlap ..... it works so much better now!!