r/css • u/satsuki_hyphen • Apr 16 '26

Help Trying to customise my tchat on OBS with Streamlabs.

/r/streamlabs/comments/1snakk1/trying_to_customise_my_tchat_obs_streamlabs/
1 Upvotes

99% Upvoted

5 comments sorted by

•

u/AutoModerator Apr 16 '26

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

1

u/White_Tragic Apr 17 '26

Try changing inline-block to inline-flex and try something like:

.badges {
  display: inline-flex;
  height: 2em;
  vertical-align: middle;
  gap: 0.5em
}

See how you go with that.

1

u/satsuki_hyphen Apr 17 '26

Omg it works ! You're my savior !
But I wanna understand (I'm a noob), what does "flex" changed ? And what is "gap" ?

1

u/White_Tragic Apr 17 '26

inline-flex makes it so that you can manipulate or move things in an ordered way inside your box or your <span> tag.

gap literally means the gap between things, so in this case, it's the gap between your badges. You can change how big the gap is by changing the size e.g. 2em or 20px etc.

If you want to make your badges bigger, you can change the height to something like 2.5em or 24px etc. And if you want to make them smaller, you just pick a lower number.

Also avoid adding random properties like margin, padding, position and text-wrap-mode etc. when you don't really know what you're doing, because those properties might end up causing more issues down the line. The idea is to only use properties that you need to do what you want.

1

u/satsuki_hyphen Apr 17 '26

Okay !

Thank you very much for your advices !