How to make such a map adaptive?

Question

Java

How to arrange the inscriptions so that the map is adaptive and the inscriptions do not leave? I'm typing on the bootstrap grid.

Answer 1

The bootstrap grid is the worst thing for adaptability. This is a stupid development that constantly breaks on custom resolutions.
I recommended you to move away from bootstrap grids in favor of flexbox. In this case, solve the issue of adaptability yourself.

Answer 2

Just make the top, left, right, bottom values ​​as percentages and everything will adapt.

Answer 3

Here, in addition to the technical issue, there is the issue of ergonomics.
Technically:
a) when reducing the width, remove the decorative girl and scale the map proportionally. But then the cities will become small and it will be difficult to click in them.
b) when reducing the width, remove the decorative girl, and show the map in the same scale, but with horizontal scrolling. Clicking on cities is convenient, but some are behind the screen.
Fundamentally:
c) when reducing the width, remove the decorative girl and, as soon as the card no longer fits, replace the card with an ordinary alphabetical list. All cities will fit on one screen.