Изображение идет под текстом

Question

Я не понимаю, как это исправить.

Всякий раз, когда я нахожусь на мобильном или планшетном представлении, изображение проходит под текстом, и это делает слова нечитаемыми. Это выглядит потрясающе на ноутбуке/компьютере, но ужасно на мобильных телефонах или планшетах. Это мой сайт. http://www.phincer.com/ Его часть, которая имеет заголовок «Мы ​​знаем, насколько важен веб-сайт для вашей компании» Вот код.

.style_two { 
    position: relative; 
} 
    .style_two .promo-image { 
    position: relative; 
    padding: 0px; 
    border-top: 1px solid #e7e7e7; 
    border-bottom: 1px solid #e7e7e7; 
    text-align: right; 
    background: #ffffff; 
    overflow: hidden 
} 
    .style_two .promo-image img { 
    width: 50%; 
    float: right; 
} 
    .style_two .caption { 
    width: 49%; 
    float: left; 
    height: 100%; 
    background: #ffffff; 
    text-align: left; 
    position: relative; 
    /*margin-left: 10px;*/ 
} 

Answer 1

Это связано с тем, что вы неправильно установили позиции. Она должна быть "относительной"

Изменить следующий код,

<div class="caption wow fadeIn" data-wow-delay="1s"> 

этому

<div class="caption wow fadeIn" data-wow-delay="1s" style="position:relative"> 

, иначе вы можете просто изменить свой CSS, как следующее.

.style_two .caption { 
    width: 49%; 
    float: left; 
    height: 100%; 
    background: #ffffff; 
    text-align: left; 
    position: relative !important; 
}