Текст движется вниз при увеличении масштаба, как сделать чтобы он не двигался?

Question

[cedFlame]

У меня есть стили для кнопок вот они.

.pc nav .menuItems li button {
        top: 1vw;
        cursor: pointer;
        background-color: #00000000;
        border: #00000000;
        font-size: 1vw;
        font-family: Ubuntu, "times new roman", times, roman, serif;
        text-decoration: none;
        position: relative;
        z-index: 99999;
    }
    [data-class='main']{
        font-weight: 400;
        color: #353636;
        text-transform: lowercase;
    }
    [data-class='main-i']{
        font-weight: 200;
        font-family: Ubuntu, "times new roman", times, roman, serif;
        color: #3c3c3c;
        position: relative;
        display: inline;
        background-color: #00000000;
        border: #00000000;
        cursor: pointer;
    }

Вот как съезжает текст

Comments

[RAX7]

Замени .pc nav .menuItems li button { top: 1vw; на значение в px/em

Answer 1

[Полина Емельянова]

У вас top: 1vw; - это вьюпорт юнит. Он зваисит от ширины экране. Попробуйте заменить на % или более стабильные единицы измерения.

Comments

[cedFlame]

Мне надо чтобы при увеличении масштаба размер текста не менялся и не сползал, при px он увеличивается а при % так же сползает

Answer 2

[green300]

высота и ширина 100% вроде или авто...для блоков срабатывает