custom css related queries

At a glance

The community member had two main issues they needed to address:

1. Reducing the font size of the text. They were able to achieve this by adding custom CSS to set the font size to 14px. However, they were unsure how to change the font size of the text appearing in the input HTML tags, which remained at 16px.

2. Reducing the bubble spacing/padding. The community member was able to adjust the padding for the guest bubble using custom CSS. However, they encountered an issue with the host bubble, where the bottom and right margins did not work as expected.

In the comments, another community member provided solutions for both issues:

1. To change the font size of the input HTML element, they used the following custom CSS: input.text-input { font-size: 14px !important; }

2. To fix the margin issue in the host bubble, they added the following CSS: div.text-ellipsis { margin-left: 8px; margin-right: 8px; margin-top: 4px; margin-bottom: 4px; } and removed the previous CSS for the host bubble.

The community member noted that while these solutions

WWilliam

There are a few questions:

I need to reduce the font size

In order to reduce the font size, I added the following custom css:

.text-base {
  font-size: 14px;
  line-height: 20px;
}

This reduced the size of the text to what I needed. But, is there a way to change the size of text appearing in the input html tags? Those sizes still remain 16px as seen in following example:
<input class="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full text-input" type="text" placeholder="Type your name..." style="font-size: 16px;">
Is there a way to override this?

I need to reduce the bubble spacing/padding.

I used the following custom css:

[data-testid="guest-bubble"] {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}

[data-testid="host-bubble"] {
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}

The guest bubble works fine, but in the host bubble the bottom and right margins do not work. Can check attached images.

Attachment

2 comments

WWilliam

For point 1, i was able to change the font size for the input html element with the following custom css:

input.text-input {
    font-size: 14px !important;
}

WWilliam

For point 2, i was able to fix the margin issue in the host bubble by adding:

div.text-ellipsis {
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}

also removed the following:

[data-testid="host-bubble"] {
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}

I am not sure if the above solutions are the best possible, but they are working for now. Leaving it here if anyone wants to use them, or if anyone has better advice.

Add a reply

Share feedback, ideas and get community help

custom css related queries