Responsive CSS Speech Bubble

Question

I've created the following speech bubble to show helpful tips for folks on a website. It works, but isn't responsive and longer comments will bleed off the right side of the screen on some mobile devices.

How can I make it responsive?

Currently looks like:

.bubble .bubble-avatar {
  float: left;
  margin-left: -125px;
  margin-top: -15px;
  font-size: 75px;
}
.bubble {
  position: relative;
  width: 250px;
  height: auto;
  min-height: 50px;
  padding: 1.5em;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: #000000 solid 3px;
  margin-left: 80px;
}
.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #FFFFFF;
  display: block;
  width: 0;
  z-index: 1;
  left: -15px;
  top: 33px;
}
.bubble:before {
  font-size: 10em;
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 17px 17px 17px 0;
  border-color: transparent #000000;
  display: block;
  width: 0;
  z-index: 0;
  left: -20px;
  top: 31px;
}

<div class="bubble"><i class="pw-icon-user-outline bubble-avatar"></i>
  Sorry, I feel you should stop what you are doing and have some nachos! Go on...
</div>

You could use Bootstrap, it has a feature called ToolTip that does what you're looking for. Probably overkill for just a single feature, but if you don't want to mess with CSS, Bootstrap makes it a lot easier with tons of pre-set layouts to choose from. — QuestionMarks, Nov 10 '15 at 20:24
I thought about that, but I'm hoping to achieve this type of look and feel to the site. — Eddie, Nov 10 '15 at 23:58

score 0 · Answer 1 · answered Jun 24 '18 at 05:33

You can use overflow-wrap: break-word;

The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.

Responsive CSS Speech Bubble

1 Answers1