Rustam Bainazarov

https://infinite-scroll.com/demo/full-page/

Крутите вниз, чтобы проверить работу плагина.

В одном проекте его применили, всё работает хорошо.

Если img превышает высоту родительского блока, то блок увеличивается.

Flex (для лучшей и более простой поддержки браузеров) + box-shadow (чтобы не увеличивать габариты блоков; можно заменить на псевдоэлемент):

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

function toggleSubmenuDisplay() {
    document.addEventListener('touchstart', function(event) {
        // ВОТ ЭТОТ КУСОК -- НАЧАЛО
        if (event.target.matches('a')) {
            var url = event.target.getAttribute('href') ? event.target.getAttribute('href') : '';
            if ('#' !== url && '' !== url) {
                window.location = url;
            } else if ('#' === url && event.target.nextSibling.matches('.submenu-expand')) {
                openSubMenu(event.target);
            } else {
                event.preventDefault();
            }
        }
        // ВОТ ЭТОТ КУСОК -- КОНЕЦ

    ...

Из-за него это всё. Нужно переписать, либо убрать его нафиг. Он все ссылки обрабатывает. С учетом того, что я в разметке не вижу элементов с классом submenu-expand, я бы закомментировал целиком этот участок и посмотрел, что сломалось. Если ничего не сломалось, так бы и оставил.

Удобно? Хм…

Ну раз удобно, попробуйте использовать выданный ими код в реальном проекте — сразу всё поймёте :))

Почесать собственную спину с помощью мизинца на ноге — и то удобнее будет.

<a href="#" onclick="javascript:window.location.port=8083">Панель VDS сервера</a>

Просто ссылкой нельзя.

Это называется высотой строки (свойство line-height).

Вы можете прописать высоту строки самостоятельно. В данном примере высота строки вычисляется автоматически на основе высоты шрифта. Высота строки шрифта обычно больше его реальной высоты. Сделано это для того, чтобы шрифт не слипался, если текст в две и более строки.

Более того, я не знаю, что у вас в макете и как это должно выглядеть, поэтому могу понять вас неверно. Но если я правильно понял, отступ сверху нужно задать у родительского блока с помощью padding, либо у этого h1 с помощью margin-top.

P. S. Описанный MaxKorz метод предназначен для нивелирования влияния высоты строки на верхний отступ текстового блока от границы родительского блока.

Никаких float'ов и лишних обёрток...

Так задайте свои стили для h1.

h1 {
  font-size: 16px; /* ну или что там у вас тут будет; inherit, em, rem */
  font-weight: normal; /* сброс начертания до обычного */
}

Код выше будет работать для всех h1. Если не хотите, делайте более специфичный селектор, опираясь от класса обёртки-родителя, т. е. смотрите вашу разметку.

На всякий пожарный случай:
https://learn.javascript.ru/css-selectors.

P. S. Номинант на премию «Вопрос-ответ года».

Если так не хотите с помощью таблиц, то единственным полноценным (и улучшенным) вариантом для вас будет верстка с помощью CSS Grid:
https://css-tricks.com/snippets/css/complete-guide...

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

Пример + адаптивность:
https://medium.com/evodeck/responsive-data-tables-...

P. S. В табличной верстке вполне реально сделать так, чтобы картинки «идеально так же встали». Поддержка grid хоть и неплохая, но хуже, чем у того же Flexbox и тем более хуже, чем у исконных table. Поэтому пользуйтесь caniuse.com для определения ваших потребностей и возможностей.

В данном случае, на мой взгляд, либо table, либо grid. Flexbox тут не очень подходит, т. к. он не умеет управлять одновременно как строками, так и колонками (только чем-то одним: row или column).

1. Во-первых, у вас SVG неправильный: сама картинка среди кучи пустого пространства.
2. Во-вторых, много лишнего CSS-кода.
3. В-третьих, лучше сделать через background-image, чтобы избежать ошибок масштабирования в IE.
4. В-четвертых я исправил и сжал ваш SVG:



Просто скопируйте SVG-код.

Если вы делаете безо всякого фреймворка, у вас нет админки, где можно такие блоки создать и на выходе нужные стили будут проставляться хоть inline, хоть через какой-нибудь data-атрибут для JS… то, конечно, либо через классы к каждому блоку, либо через nth-child, либо через inline CSS.

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

Я такие блоки делал так: img (+ lazyload, формат JPG) и inline-стиль цвета фона обёртки, чтобы не было пустых областей ни при каких обстоятельствах. Всё это дело обрабатывалось в админке и выводилось на сайте. Можно было использовать background-image спокойно, это уже не так важно.

Если будете делать такой же гибрид (CSS-цвет + JPG с фоном), будьте аккуратны, у JPG могут быть артефакты сжатия из-за которых цвет фона может быть неоднородным, и на стыках может быть разница между картинкой и фоновым CSS-цветом. PNG предпочтительнее в данном плане, но у него есть недостаток в плане размера.

Эм, ну как — как? Чтобы сверстать некий «любой анимированный элемент» нужно его… сверстать.

Да-да, вы не ослушались, его нужно сверстать — т. е. воспользоваться HTML, CSS, JS и, если нужно, canvas.

Ну а рассказывать обо всём диапазоне технологий и их практическом применении, во-первых, никто не сможет, а во-вторых, никто не будет. У вас слишком общий вопрос.

Ну как бы вам сказать. Размер блоков — это одно. Их уместить в строку просто. Сложнее уместить шрифт, который не адаптивен по своей сути.

Но есть один метод:
https://css-tricks.com/snippets/css/fluid-typography/

Нужно будет скопировать сниппет, задать нужные параметры методом пробы.

Советую брать в основу десктопного макета разрешение типичного ноутбука (1360px) + вычитать полосу прокрутки (16–17px). В любом случае учитывать полосу прокрутки нужно обязательно, чтобы избежать проблем.

А ещё лучше, чтобы ваш макет умещался в рамках ~1320px, потому что некоторые шрифты на разных ОС и в разных браузерах могут иметь различный размер значений межбуквенного расстояния. К примеру, такая шняга есть у шрифта Circe: MacOS рендерит с большим межбуквенным расстоянием, чем Windows (и это в рамках одного браузера — Chrome).

P. S. Почему за основу именно типичный ноутбук? Потому что большинство больших мониторов имеет оное разрешение, в т. ч. куча недорогих мониторов по 22 дюйма и подобные им. Лучше, конечно, продумать макеты и на разрешения выше (к примеру, 1360–1600, 1601–1920, 1921–2560). Ну и так далее. Всё зависит от дизайна.

LOL (!!!), у вас сайт весит 39 Мб (!!!), 130 запросов, PNG-картинки по 3 Мб, фото для фона весит 4,5 Мб... а вы спрашивайте, почему у вас сайт грузится так плохо. Ясен пень, что у вас все пустое (белый шрифт на белом фоне), пока не прогрузится хотя бы фоновый рисунок.

CSS и DOM у вас прогружаются совершенно нормально, у вас тут проблемы посерьёзнее :))

Для начала включите на сервере GZIP-сжатие, а также уменьшите картинки по габаритам в Photoshop и прогоните их всех хотя бы через это: https://tinypng.com.

Это чуть-чуть облегчит сей ад (наверное, LOL), но я уже не берусь изучать все остальные технические аспекты данного сайта... Я такого давно не видел.

https://tools.pingdom.com/#59e8fb75ecc00000

Самый правильный вариант — с помощью clip-path, потому что с его помощью безо всякого вращения можно обрезать по формуле блок сверху и снизу. При этом, можно использовать значения по типу calc(100% - 50px), чтобы при изменении ширины экрана, область «скоса» всегда равнялась, как в значении выше, 50 пикселям, что упрощает совмещение нескольких таких блоков с помощью отрицательных margin'ов ( margin: -50px 0; ).

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

Одна проблема — поддержка clip-path со стороны браузеров. Вот пример реализации такого подхода: proappliancerepair.com. У меня не стояло задачи поддерживать старые браузеры, поэтому использовал clip-path смело.