Как лучше сделать текст, как на скрине, вокруг кольца?

Question

[Роман Тузов]

Сколько я уже способов перепробовал, но никакой не подходит под адаптивный показ, чтобы текст не налазил на кольцо. Кто может подсказать как сделать текст, как на скрине, вокруг кольца, и в то же время он был адаптивным и при уменьшении разрешения не налазил на кольцо. Подскажите, пожалуйста, как бы вы решили эту задачу

Comments

[Lord_Dantes]

картинка битая

[Роман Тузов]

s l a v e, в смысле, не можете посмотреть?

[WapSter]

Задать фиксированную ширину/высоту для кольца, блоки текста относительно позиционировать. В адаптиве убрать позиционирование и кольцо, просто оставить текст с иконками.

[Lord_Dantes]

Hutson, da

[Роман Тузов]

WapSter, Я так предполагал, но что значит относительное позиционирование?

[Роман Тузов]

s l a v e, поменял, если и сейчас не загрузится, то я не знаю почему она не показывается у вас. Возможно, это Ваши проблемы и их нужно решить на вашем пк

[WapSter]

Hutson, position: relative, absolute, fixed, sticky, static

[Lord_Dantes]

Hutson, картинка есть.
Я бы сделал эту картинку в свг на десктопе, планшетах и тд. На мобилке сделал бы пунктами без кружка.
Типо скрывать картинку и показывать список действий.

[RAX7]

Располагай текст вокруг кольца с помощью transform: rotate. Размеры текста и отступы при необходимости поправь медиа-запросами.

Answer 1

[Антон Усачев]

Гриды рулят!
Здесь просто вставлено изображение круга с "иконками", однако иконки можно расположить абсолютно на круге, тогда они не будут уменьшаться при сужении экрана.