Невозможно установить правильный заголовок представления для мобильного представления

#css

Вопрос:

Мы настроили внешний вид продуктов для настольного представления и для больших телефонов. Но мы никак не можем правильно настроить его для телефонов меньшего размера.

Под фотографией и кодом

 /* Products list - view list */
.products-list .item .item-inner .box-info-list {
margin-left: 150px;
padding: 2px;
}
.products-list .item .item-inner {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 1px 1px 2px 1px #ccc;
    margin-bottom: 15px;
}
.products-list .item .item-inner:hover {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 2px 2px 3px 2px #ccc;
}

.products-list .item .item-inner .box-image-list {
width: 140px;
border: 0px solid #ddd;
}
@media (min-width: 320px) and (max-width: 767px) {
.products-list .item .item-inner .box-info-list .product-name {
    font-weight: 700;
    font-size: 90.33%;
    text-transform: capitalize;
    margin-bottom: 0px;
}
.products-list .item .item-inner .box-image-list {
width: 30%;
border: 0px solid #ddd;
}
.products-list .item .item-inner .box-info-list {
margin-left: 140px;
padding: 2px;
}
}

правильно:

экран проблемы:

1. Привет @Sylvester, можете ли вы также предоставить html?

2. Привет, @Arvie, ты можешь проверить здесь: zabezcen.pl/pl/elektronika.html

3. @Sylvester не ссылайтесь на внешний источник, укажите html в вопросе. Мы не собираемся копаться в корыте отображаемого браузером кода. Кроме того, если ваш веб-сайт изменится, вопрос не будет иметь смысла

Ответ №1:

Лично я предпочитаю использовать flexbox with CSS3 для адаптивного веб-дизайна. Вы могли бы попробовать что-то вроде этого:

 @media (max-width: 767px) {
  .products-list .item .item-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .products-list .item .item-inner .box-image-list {
    flex-basis: 30%;
  }

  .products-list .item .item-inner .box-info-list {
    flex-basis: 65%;
    margin-left: 0;
  }
}

1. @Antonis, после использования ваш код выглядит лучше, но все равно отображается некорректно. Не могли бы вы проверить еще раз? Спасибо

2. Хорошо, вы должны удалить левое поле.. Проверьте обновление!

Ответ №2:

@Sylvester

Я вижу, что таблица отображения используется для родительского элемента, а поле-слева для одного из дочерних элементов. Лично я бы использовал что-то другое, например, display flex. Но если вы примените к дочерним элементам отображение таблицы-ячейки и отсутствие ширины (на уровне по умолчанию / наименьшем окне просмотра), это многое исправит :).