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

Ниже будет пример того, как это можно сделать с использованием css свойств flexbox.


Категории: Web, CSS, -Памятка-
Пометки: Как сделать двухколончатую таблицу на css flex css flex таблица, css flexbox

Иногда, особенно при адаптивной верстке, нужно разделить одну линию блоков, с display: flex;, на несколько рядов.


Категории: CSS
Пометки: flex перенос строки, css flex новая строка

После выхода Font Awesome 5'ой версии, появление PRO, kit и т.д. стало сложно найти прямую ссылку на CDN шрифта. Оставлю тут памятку:

 
<link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet">

Проверка:

 
<i class="fas fa-check"></i>



Также SVG версия:

 
<script defer src="https://use.fontawesome.com/releases/v5.10.2/js/all.js"></script>


Категории: Web, HTML, CSS

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

Поэтому ниже простая демонстрация замены таблицы на flexbox.


Категории: HTML, CSS
Пометки: flexbox table

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

pic1


Категории: CSS

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

Самое простое и распространенное решение, это добавлять горизонтальную прокрутку через css свойство overflow, но при этом не всегда посетителям сайта очевидно, что на экране телефона таблица, особенно если первая колонка занимает все пространство.


Категории: HTML, CSS
Пометки: отзывчивые таблицы, responsive table, адаптивные html таблицы

Памятка с медиа запросами для основных типов экранов.


Категории: CSS
Пометки: Медиа запросы (media queries)

Перечень основных терминов и сборник примеров по технологии css grid.


Категории: Web, CSS

Хорошая идея - сделать шрифт, который сам меняет свой размер в зависимости от размера экрана.


Пометки: Отзывчивый / "резиновый" шрифта на CSS

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


Категории: Web, HTML, CSS
Яндекс.Метрика