For the positioning I removed the .background-bubble
margin-bottom:-17%
and instead added top:-100px
to .foreground-bubble
since its position:relative
.
I also gave the wrapping div a new class "bubbles" and added margin-top:50px
to move it a bit further down so the tips don't collide with the text.
According the tips of the bubbles I changed:
- the size (
border-width
) of the bigger triangle - percentage -> pixels
- (background-bubble) left -> right
Here's the JSFiddle
I would also suggest you combine some of the CSS into new classes to reduce the redundancy.
e.g the border-width
and bottom:100%
of the tips.