Skip to content

Latest commit

 

History

History

product-list

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

Список товаров в интернет-магазине

Описание

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

Нужно исправить верстку так, чтобы сайтом было удобно пользоваться с любого устройства, уменьшая количество карточек в ряду при уменьшении размера экрана. Сейчас страница для десктопных устройств выглядит так, карточки выстраиваются по 5 в ряд:

Product cards layout current 5 cards

Для устройств с шириной экрана в диапазоне от 960px до 1300px включительно нужно уменьшить количество карточек в ряду до 4:

Product cards layout 4 cards

Для устройств с шириной экрана в диапазоне от 768px до 959px включительно должно быть по 3 карточки в ряду:

Product cards layout 3 cards

Для устройств с шириной экрана в диапазоне от 376px до 767px включительно — 2 карточки в ряду:

Product cards layout 2 cards

Для устройств с шириной экрана от 375px и меньше — по 1 карточке в ряду:

Product cards layout 1 card

Процесс реализации

  1. Если вы выполняете задание в песочнице CodePen, в начале работы добавьте в тег <head> следующий метатег <meta name="viewport" content="width=device-width, initial-scale=1.0">.

  2. Для устройств, у которых ширина экранов от 1301px и больше, сделайте так, чтобы в ряду отображалось по 5 карточек.

  3. Для устройств, у которых ширина экранов в диапазоне от 960px до 1300px включительно, сделайте так, чтобы в ряду отображалось по 4 карточки.

  4. Для устройств, у которых ширина экранов в диапазоне от 768px до 959px включительно, сделайте так, чтобы в ряду отображалось по 3 карточки.

  5. Для устройств, у которых ширина экранов в диапазоне от 376px до 767px включительно, сделайте так, чтобы в ряду отображалось по 2 карточки.

  6. Для устройств, у которых ширина экранов от 375px и меньше, сделайте так, чтобы в ряду отображалось по 1 карточке.

  7. Протестировать решение можно, постепенно уменьшая ширину окна браузера. Вы должны увидеть, как количество элементов в ряду уменьшается от 5 до 1.

Реализация

Внесите изменения во вкладке CSS. Перед началом работы сделайте форк пена.