Мобильная версия при position: absolute?

Question

[Marizza40]

Добрый вечер! Подскажите пожалуйста, есть слайдер пока без анимации, его код:

<div class="slider_txt">
     <div class="kns">
        <div class="kns_text">
          Автоматизация КНС
        </div>
    <div class="button"> 
    <a href="avtomatizaciya_kns.html" class="button_a">Подробнее</a>   
    </div><!--/.button-->
    </div><!--/.kns-->
    <div class="nasos">
        <div class="nasos_text">
           Насосные станции
        </div>
        <div class="button"> 
    <a href="nasosnye_stancii.html" class="button_a_one">Подробнее</a>   
    </div><!--/.button-->
    </div><!--/.nasos-->

</div> 
    
<div class="slider">
    
    <div class="slider_a">
       </div>
    <div class="slider_b">
       </div> 
</div>

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

/*slider*/

.slider_txt{
    width: 100%;
    position: absolute;
    top: 0;
    left: -85px;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    top: 390px;
}

.kns{
    font-size: 90px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    max-width: 800px;
    margin: 0 auto;
    text-align: right;
    line-height: 1.2;
}

.slider_line {
    content: "";
    display: block;
    width: 60%;
    height: 3px;
    background-color: #0092db;
}
.nasos {
    margin-bottom: 90px;
}

.nasos_text{
    font-size: 90px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    line-height: 1.2;
}
.slider{
    display: flex;
}
.slider_a{
    width: 50%;
    height: 70vh;
    background:url(/images/slider_1.jpg);
    background-position: center center;
    -webkit-background-size:cover;
    background-size:cover;
        
}
.slider_b{
    width: 50%;
    height: 70vh;
    background:url(/images/slider_2.jpg);
    background-size: 1000px 700px;
    background-position: center center;
}

Answer 1

[uRoot]

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

Используйте медиазапросы:
@media (max-width: 768px) { }

Comments

[Marizza40]

Спасибо, попробую!

[uRoot]

Marizza40, max-width: 768px - своё разрешение подставьте, когда начинается уже что-то ломаться. И вообще это ключевая тема. Вам нужно изучить её. Без неё никак.

[Marizza40]

CryNet, к сожалению, мне это не помогло. Попыталась элементарно уменьшить шрифт, не работает к сожалению. Мобильную версию, часом не надо отдельно подключать в коде, чтобы хорошо работало?

[uRoot]

Marizza40, залейте в песочницу