Довольно частая задача, особенно для лендинг сайтов,разметить несколько блоков, каждый их которых занимает определенную ширину, а при уменьшении размера экрана, они должны переноситься на следующую строку.
CSS:
Красивое оформление отзывчивых html таблиц
Извечная проблема - широкие HTML таблицы, которые и на десктопных мониторах выглядят не очень, а про мобильные устройства и говорить нечего.
Самое простое и распространенное решение, это добавлять горизонтальную прокрутку через css свойство overflow, но при этом не всегда посетителям сайта очевидно, что на экране телефона таблица, особенно если первая колонка занимает все пространство.
Подборка красивых CSS бордюров
Всем нам иногда нужен красивый бордюр для какого-либо элемента не прописанного в дизайне. Подбирать их вручную - не удобно, но можно воспользоваться уже готовым подспорьем:
CSS Медиа запросы для основных типов экранов
Памятка с медиа запросами для основных типов экранов.
Красивый лэйбл о скидке на css
Иногда нужно как-то выделить акцию, а делать для этого отдельную картинку - перебор. Тогда можно сделать красивую этикетку на css:
Иногда, из-за содержимого страницы, на мобильных устройствах появляются пустоты справа в шапке и подвале сайта.
Несколько слов о meta viewport
Мета тег viewport, предназначен для указания, как на мобильных устройствах должна отображаться "область просмотра". Далее будет несколько примеров.
Сетка bootstrap 4
Итак, идея была простая - попробовать всяческие варианты построения сетки, но это скучно. Да и первые же тесты выдали какую-то жесть.
Блок выстой с экран на CSS
Иногда требуется верстка, где страницы поделены на горизонтальные секции, каждая из которых занимает ровно размер экрана. При этом независимо от устройства / разрешения экрана. Понятно, что это можно сделать при помощи JavaScript, но есть способ лучше.
Интересное css свойство object-fit
Используя свойство object-fit удобно красиво выводить картинки товаров, особенно если они разных размеров.
Ниже несколько, для демонстрации вариантов отобрадения.