"Responsive" CSS Speech bubble

[lshwarts]

Hi all,

So I’m trying to use pure CSS speech bubbles for a testimonials page I’m working on, and the problem I run into is that the arrow at the bottom of the speech bubble gets all jacked up when the content length changes (as it will do on a testimonials page…), because the :before and :after elements have absolute positioning.

I’d like for the containing element (and the bubble arrow) to expand or contract (height) based on the amount of content, which I cannot predict. Is there a way to do this that I’m just missing? Everything I’ve read and tinkered with so far has the pseudo elements absolutely positioned with fixed numbers.

Guidance or suggestions are appreciated.

Here’s a pen of what I’m working on.

http://codepen.io/anon/pen/CErmG

[Paulie_D]

Firstly. switch the display of the bubble to inline-block.

I would add some max-width and a min-height.

As for the arrows, use percentages rather than px values to position it/them along the bottom of the bubbles.

So that the arrows line up, use calc with the same % value adjusting for the different dimensions of the arrow.

Like this: http://codepen.io/anon/pen/AIFyv

[Author]

Posts