перекрывающиеся строки в таблице в отзывчивом виде

Question

У меня возникли проблемы с фиксацией стола на this link. Он имеет две строки, но когда я перехожу к просмотру мобильных/планшетов, вторая строка перекрывается над первой строкой.

Похоже это на вложении:

Пожалуйста, помогите. Я не очень хорош в CSS.

Answer 1

Это происходит потому, что эти строки:

@media screen and (max-width: 994px) 
table.colors_pricebox tbody tr:last-child td:nth-child(2) table:first-child tbody tr:first-child 
{ 
    position: absolute !important; 
} 

Absolute позиционирование перекрываются друг с другом, если они имеют то же поле.

Если удалить атрибут или заменить его position: relative<tr> - теги не перекрываются больше, но вы должны найти способ отображения ваших <tr> - метки, содержащие цену и такие.

Answer 2

Вот исправление, рекомендуемое для быстрого поворота на данный момент. Добавьте это CSS в вашем медиазапросы

@media screen and (max-width: 994px) { 
 
    td.productDetailDiscountWrapper table tr td { 
 
    padding-top: 50px !important; 
 
    } 
 
    .product_productprice { 
 
    margin-top: 40px !important; 
 
    } 
 
}