Как позиционировать элементы под разные разрешения экрана?

Question

[Виталий Малюжец]

Здравствуйте есть к примеру блок:
<div class="rating">div
он выводить рейтинг статьи.
Для него задан стиль позиционирования:
rating{position:relative;left:428px;top:-97px}
С заданными стилям блок отлично отображается на экранах от 1280px. На всех девайсах с меньшим разрешением блок смещается за его пределы.
Подскажите как сделать, чтобы блок не смещался?

Comments

[Павел]

Примерно
@media screen and (max-width: 1279px) and (min-width: 1024px){
.rating{position:relative;left:228px;top:-47px}
}

[Ankhena]

Либо использовать значения в процентах либо изменять в media условиях.
Какой из способов лучше зависит от макета.

Answer 1

[Илья]

Вы наверное знаете, перед rating должна быть точка) Попробуйте указать значение top в процентах.

Comments

[Виталий Малюжец]

про точку знаю. Проценты ничего не дают, это для вертикального позиционирования, а у меня смещение по горизонтали.

[Илья]

Если left в процентах указать? А вообще лучше бы увидеть, как это работает.

[Виталий Малюжец]

Илья, Это не то, я пробовал в процентах.

[Виталий Малюжец]

Илья, joxi.ru/RmzkKloI0eZ8J2

[Илья]

Виталий Малюжец, Надо смотреть макет, так не скажешь, тут либо проценты, либо запросы.

[Виталий Малюжец]

Илья, https://bizperformance.ru/chto-takoe-binarnye-optsiony
Внизу страницы

[Илья]

Я понял, вообще, лучше 2 этих блока флоатить или делать с помощью флексбоксов. У вас просто структура нелогичная, блоки просто болтаются, как попало. Ну, а если решать задачу именно здесь и сейчас, то медиазапросом обнулить top и left.

[Виталий Малюжец]

Илья, Сделал через Float, спасибо.