Hello guys,

We have forum about fitness but after update our css is broken when you see some nicknames with avatars they are really bad positioned . Is it css issue? Some conflict with plugin? I didnt find out. This issue is only with some nicknames not all. Attaching screenshot and you can see it live here

Thank you very much for your help

[@robin-w Moderator 4 years, 11 months ago]

It is that the name is so short that bbpress can fit it in the space

you could fix using

#bbpress-forums div.bbp-forum-author, #bbpress-forums div.bbp-reply-author, #bbpress-forums div.bbp-topic-author {
	width: 100px;
}

in the custom css area of your theme

[@wriper Participant 4 years, 11 months ago]

Big thanks!

This worked for me

#bbpress-forums div.bbp-reply-author .bbp-author-name {
  width: 100%;
}

#bbpress-forums div.bbp-reply-author .bbp-author-role {
  width: 100%;
}

[@forgreforn Blocked 1 year, 3 months ago]

If you’re experiencing issues with avatar and nickname alignment in your CSS, but it only happens with certain nicknames, it might be related to the length of the nickname or the content within it. Here are some common reasons why this issue can occur and how to address it:

Nickname Length: Longer nicknames might overflow their container or push the avatar out of alignment. You can control this by setting a maximum width for the nickname container and using CSS properties like overflow to handle text that exceeds that width.

css

.nickname-container {
max-width: 150px; /* Adjust the width as needed */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; /* Adds ellipsis for text overflow */
}

Text Content: Unusual characters or long strings without spaces in a nickname might disrupt the layout. Ensure that your CSS and HTML can handle various character types and lengths. You might need to adjust the font size or line height to accommodate the content.

css

.nickname-container {
font-size: 14px; /* Adjust font size as needed */
line-height: 1.2; /* Adjust line height as needed */
}

CSS Specificity: Make sure that the CSS rules you’ve defined for nicknames are specific enough and not being overridden by more general CSS rules elsewhere in your stylesheet.

Testing: Test your layout with different nicknames to identify patterns in which the issue occurs. This can help you pinpoint any specific conditions that trigger the problem.

If you can provide more details about the HTML and CSS you’re using and any specific examples of problematic nicknames, I can offer more targeted assistance.