После увольнения генерального директора крупного СМИ правление выделило дополнительный бюджет на развитие их веб-сайта.
Перед вами стоит задача сделать резиновой страницу с карточками свежих новостей из разных источников.
Сейчас, если открыть верстку в окне браузера шириной 768px, то часть карточек окажется за пределами окна и появится полоса горизонтальной прокрутки:
Избавьтесь от прокрутки, чтобы все карточки можно было прочитать сразу:
При этом важно сохранить border, внутренние и внешние отступы карточки в px неизменными, независимо от ширины контейнера и карточек. Это личная просьба дизайнера.
Также нужно сделать, чтобы контейнер тянулся от 768px до 1300px.
Верстка должна выглядеть так:
-
Рассчитайте значение свойства
widthблока с классомcontainerв процентах. Укажите такую ширину блока с классомcontainer, чтобы она была равна960pxпри ширине окна1366px. -
Укажите значения минимальной и максимальной ширины блока с классом
container. Ширина этого блока должна достигать своего наименьшего значения768pxи наибольшего значения1300px. Внутренние отступы блока должны оставаться неизменными. -
Измените значение свойства
widthдля блоков с классомcardтаким образом, чтобы в строчку помещалось по две карточки и это значение учитывало заданные абсолютноmargin,paddingиborderблоков. Независимо от ширины блока внутренние отступы должны оставаться равными30pxсверху и снизу и20pxпо бокам, ширина обводки —1px, внешние отступы —20pxснизу и10pxсбоку. -
Проверьте правильность своего решения, изменяя ширину окна браузера. При ширине окна
768pxблок должен иметь ширину, как на скриншоте:
При сужении окна менее 768px должна появиться горизонтальная прокрутка:
При большом размере окна браузера, как 1920px, .container должен иметь ширину, как на скриншоте:
Не нужно вносить какие-либо другие правки в CSS или писать дополнительные правила. Также не изменяйте HTML-разметку.
При решении этой задачи не изменяйте HTML-разметку.
Внесите изменения во вкладке CSS. Перед началом работы сделайте форк пена здесь.