CSS position problem

This CSS issue is driving me mad! :upside_down_face:

I want the text to appear centred in the speech bubble. However, it appears to move up and down when the user zooms the browser in and out.

For example, in 75% zoom the text appears to be too high:
75-zoom

But in 80% zoom it looks alright:
80-zoom

Why doesn’t the text stay in the same place relative to the SVG? Should I be using a completely different approach?

https://codesandbox.io/s/quizzical-lumiere-cc2o4

I think using percentages instead of ems for the position offsets might help a bit.

#text-wrapper {
  top: 6%;
  left: 10.5%;
}

You might think about approaching this a different way as well. You could use CSS borders to create the bubble around the text and then an image for the pointer below the bubble (or I suppose you could even use CSS for that if you get a little creative). The advantage to use CSS borders is that the bubble will automatically widen as the length of the text gets wider.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.