Как правильно сделать таблицу адаптивной?

Question

[Максим К]

Всем привет. Есть таблица с карточками товаров, никак не могу добиться адаптивности (((, уже все, что знал перепробовал. В итоге страница формируется и на экране выглядит норм, но на мобильнике - это тихий ужас, все прижато в один столбец и справа получается поле еще в 200px это при разрешении экрана почти 320px по ширине. Соответственно, если дале экран расширять, то справа все больше и больше расстояние получается пустое, а должны располагаться картинкив 2 столбца, далее в 3 и т.д. Уже и сайт п ролистал https://medium.com/web-standards/responsive-grid-s...

https://www.bootply.com/wUNPt0WPj3

Answer 1

[i10dev]

ты намудрил с BS .col-**-*.
Блоки адаптируются правильно. Проблема в img. img имеет постоянный размер(ш150px и в 150px), при маленьком разрешении у тебя колонки имеют ширину больше чем 150 пикселей, отсюда и появляется пустое пространство.
например при ширине экрана в 600 пикселей, каждый блок имеет ширину в 265 пикселей, а img имеет ширину в 150. вот те и пустое пространство в 300 пикселей

Comments

[i10dev]

Для наглядности можешь в каждому блоку дать border: 1px solid, что бы увидеть как именно располагаются элементы

[Максим К]

i10dev, как тогда можно исправить? Как убирают это пустое пространство ? Почему блоки стали широкие при уменьшее экрана - ведь там inline-box? Просто объектов мало и на небольших экранах - смотрится слишком "топорно". И еще вопрос, как тогда правильно рассчитывают такие классы col-xs-12 col-sm-6 col-md-2, инфы много, но на деле не сильно увидел разницу что бы не писал в значения.

[i10dev]

для простоты дай временно каждому блоку стиль border:1px solid и box-sizing: border-box; <-- так ты будешь видеть границы каждого блока.
А дальше методом тыка и подгона для каждого разрешения, где то увеличил, где то уменьшил.
небольшая проблема в том, что ты, используешь img и ни как не стилизуешь его. Он у тебя при любом разрешении экрана постоянный.
Как Вариант можешь каждому блоку дать min-widht( но это не идеальное решение)

[Максим К]

i10dev, Переделал, НО подскажите как правильно выбирать col-xs-4 col-sm-4 col-md-2 - сейчас методом подбора сделал. На сколько сейчас верстка правильная? https://www.bootply.com/H69M8YsS0r Спасибо.

[i10dev]

Максим К, нет не правильно.
Есть стили которые полностью портят сетку например класс catalog_item имеет свойство со значением max-width: 110px;
" НО подскажите как правильно выбирать col-xs-4 col-sm-4 col-md-2 "--- тут очень проблематично объяснять такое
по поводу сетки лучше посмотри видосики на youtube.