Как адаптировать этот блок?

Question

[Alibek Kulseitov]

Добрый вечер!) Все ломаю голову как адаптировать данный блок? joxi.ru/bmo0xqZhMkdlY2
Каким образом этот блок должен отображаться на мобильных, планшетах итп. Ну думаю если вы предложите какой-то свой метод или уже имели дело с такими блоками то помогите). Может вы знаете какие-то методы или фичи)
Сайт адаптирую под 3 размера пк, планшеты, мобилки.

Answer 1

[Евгений]

При десктопном разрешении показываете 4 блока поряд.
При планшетом 2 блока подряд, а при мобильном 1 блок, так же думаю стоит убрать весь текст под спойлер и добавить кнопку "Подбробнее" при мобильном разрешении, чтобы пользователь не скролил пол года всю страницу.
Ну и соответственно в CSS что-то в этом роде

.blocks {
    display: inline-block;
    width: 25%;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .blocks {
        width: 50%;
    }
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    .blocks {
        width: 100%;
    }
}

Comments

[Alibek Kulseitov]

ну со стилями понятно) А вот про спойлер вы хорошую идею дали) спасибо) посмотрим что еще скажут люди))

Answer 2

[Сергей Тутуков]

Может вот это решение подойдет
https://codyhouse.co/gem/products-comparison-table/