Не работает позиционирование как нужно на разных устройствах, как решить?

Question

[Fluber]

Всем привет. Есть такой у меня шаблончик: https://jsbin.com/nicoyuyoba/edit?html,output дело в том что если смотреть в разрешении > 1600, то показываются нормально элементы, которые позиционируются относительно картинки, если же смотреть на ноутбуке или на айпаде, то элементы сползают как по ширине так и по высоте, хотя при этом у родительского элемента есть фиксированная ширина и стоит position: relative. Вопрос, что я делаю не так и как решить? Я хочу чтобы на всех устройствах показывало одинаково.

Comments

[WapSter]

Ну так там % соотношения, конечно они сползать будут. Если хочешь, чтобы не сползало фиксируй ширину/высоту картинки и не используй % в позиционировании элементов, для адаптации по брекпоинтам уменьшай картинку, и подгоняй позиционируемые элементы. Надеюсь понял))

[Fluber]

WapSter, эм нет там процентов, я позиционирую в px

[WapSter]

Fluber, извини я наверное ослеп, хотя хз

.left-side .stats-block-info:nth-child(1) {
    top: 3%;
    left: 21%;
}

[Fluber]

WapSter, а не. это старый, вот новый: https://jsbin.com/nicoyuyoba/edit?html,css,output

[WapSter]

Fluber, досвидания

[Fluber]

WapSter, печально, как видишь с пикселями тоже смещается)

[Ankhena]

то элементы сползают как по ширине так и по высоте, хотя при этом у родительского элемента есть фиксированная ширина и стоит position: relative.

Да где же она фиксированная, если у родителя .left-side'а задан flex. Поэтому он уменьшается.
Т.е. нужно либо запретить ему уменьшаться, тогда получите горизонтальную прокрутку, когда перестанет помещаться.

Либо смещения нужно задавать в %, причем предварительно поняв откуда их считать (обычно от центра, а не от краев), а размеры самих элементов и шрифта переписывать в vw, тогда будет масштабироваться.

Либо комбо этих вариантов и media условия. Это лучший способ, иначе на мобилках все будет уже микроскопическим.

если же смотреть на ноутбуке или на айпаде

Выражайтесь точнее. У ноутбука может быть какое угодно разрешение, да и айпады бывают разные.

Answer 1

[Сергей]

Погуглите про адаптивный дизайн, медиа-запросы.

Comments

[Fluber]

Ну делать медиа на каждый размер и делать позиционирование на каждый размер проще простого, но не по мне и я не могу знать всех размеров экрана пользователей

[Сергей]

Fluber, тогда использовать em или vw вместо px.

pxtoem.com

[Fluber]

Сергей, и это пробовал, увы все равно смещается