Как я могу исправить макет моего сайта для мобильных устройств?

Question

Я сделал здесь простой ethereum каталог сайтов, вы можете просмотреть его здесь black-bit.surge. sh

Я пытаюсь исправить ошибку для мобильных устройств - я хочу то, что карты категорий отображаются на мобильном телефоне под друг другом и не только заставляют его реагировать.

В основном, карта 1 категории должна состоять из 1 строки

Как я могу это сделать?

You can view the full code on pastepin

https://pastebin.com/H9cUfanP

Если у вас есть лучшая идея для макета, пожалуйста, также оставьте ответ

Answer 1

Ваш HTML Отсутствующий viewport тег:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bootstrap разработан в первую очередь для мобильных устройств, стратегия в котором мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости, используя CSS медиазапросы. Чтобы обеспечить правильный рендеринг и масштабирование касанием для всех устройств, добавьте метатег отзывчивого окна просмотра к вашему.

https://getbootstrap.com/docs/4.0/getting-started/introduction/#responsive -meta-tag

Шаблон стартера ей:

https://getbootstrap.com/docs/4.0/getting-started/introduction/