CSS как уловить нажатие на кнопку через инспектор?

:active, может быть?

Что значит контентная область - 970px-1000px + 30px отступы?

Andrej Sharapov, я бы его причислил к лику святых.

Что значит контентная область - 970px-1000px + 30px отступы?

Контентная область — это область, где контент.

Пришлите скриншот макета — покажу.

Как осуществить перетаскивание HTML-блока?

Anon Shifrov, используйте:
https://shopify.github.io/draggable

Там есть такой параметр.

Почему height отображается не так как задано?

Визуальная ошибка рендеринга.

Как получить составляющие цвета через CSS?

Никак.

Как изменить высоту bootstrap?

Виктор Таран, а мне-то нафига это писать? Я не автор вопроса, я не использую Bootstrap, мне сверстать такой блок — 5 минут с нуля со всеми стилями

В любой нормальной западной компании никакого Bootstrap'а не используют. Либо вы не собирали относительно крупный проект с уникальным дизайном. К примеру, никто в моей команде не использует Bootstrap, потому что он не масштабируется нормально.

Судя по всему вёрсткой вы не занимаетесь, если говорите, что только на Bootstrap можно сделать что угодно. Либо верстаете простые макеты с простой сеткой, для которых и предназначен Bootstrap, ибо это готовый фреймворк. И как любое универсальное решение — оно требует сильные доработки под нужды проекта. Проще с нуля сделать.

Если бы я до сих пор ваял простые лендинги по 100 тысяч рублей, то я бы, наверное, и использовал Bootstrap.

А касательно вопроса — я писал автору вопроса о том, что я не понимаю, почему надо озираться на грёбаный Bootstrap постоянно и пытаться из него что-то слепить, когда сверстать с нуля такую секцию — дело 5-ти минут. Как только что-то в Bootstrap'е нет готового — всё, блин, ступор. Как же сделать эту простейшую секцию, LOL… Bootstrap запрещает сделать свои классы и CSS-правила для них, что ли?

Ускорить загрузку шрифтов с гугл фонта?

MegaPuxapb, ну тогда пишу ответ.

Как правильно группировать/разделять свойства Css в рамках одного объявления?

Рома Зварич, вполне адекватно у вас сделано выше.

Как растянуть блок на всю высоту родителя?

Spaceoddity, снобизм проявили вы, обвинив W3C в грехах, когда они ни в чем не виноваты. Засим, я и ответил на это. Ну а так -- да, мы сволочи.

Почему красные элементы должны быть внутри синих, чтобы они появлялись при наведении?

Вот этот эффект безо всяких абсолютных позиционирований:

Как правильно группировать/разделять свойства Css в рамках одного объявления?

Правильного нет на самом деле, но подход хороший. Вручную это делать, конечно, вообще не стоит. Раньше для этого был CSS Comb для предпродакшена. Что сейчас — не знаю, к сожалению.

Хотя я вручную группирую всегда правила на автомате уже.

P. S. Группировка свойств в рамках одного правила не влияет на функциональность. Это лишь для красоты и читабельности кода.

Как растянуть блок на всю высоту родителя?

Spaceoddity, понятно, что вы на понт взяли, но это не отменяет моих слов, потому что у вас хаос и непонимание технологий в коде.

Если много всего:


Если мало всего:


Spaceoddity, ну а если вам там что-то по высоте нужно ограничить в зависимости от viewport'a и сохранить прокрутку только одной области:


Так что ищите нужный вам вариант и дорабатывайте вам код, ибо скорее всего я не до конца понял вашей задачи.

Как менять цвет внешнего SVG?

KononovD, я больше про финальный вывод.

Но я понял, что вы через тег embed. Да, это жёсткий метод.

Как менять цвет внешнего SVG?

RAX7, не учи плохому :))

Но это на самом деле как вариант.

Ускорить загрузку шрифтов с гугл фонта?

MegaPuxapb, тогда поставьте вот это:

font-display:block;

Браузер будет ждать загрузки шрифта, только потом показывать текст.

Пример:

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

Как растянуть блок на всю высоту родителя?

Жуткая структура. W3C, flex и анимации тут не причем. Просто вы некорректно используете технологии.

Как менять цвет внешнего SVG?

Никак. SVG в таком варианте как за витриной — можно смотреть, но не потрогать нельзя (не моя аналогия).

Покажите код, как вы грузите, кстати.

В будущем станет возможно. Появится аналог #use в CSS, но не сейчас.

Ускорить загрузку шрифтов с гугл фонта?

Ваш сайт грузится как надо. Судя по всему, у вас font-display: swap (не могу проверить с телефона, но думаю, что так оно и есть).

Если это свойство в @font-face есть, то уберите его.

Но (!!!) я не советую этого делать, у вас сайт грузится быстро и хорошо, контент появляется почти мгновенно, зачем ухудшать. 300 мс времени, когда отображается не тот шрифт — это фигня полная. Гораздо важнее, что у вас первый контент сайта прогружается быстро.

А скорость загрузки и обработки шрифтов с Google Fonts CDN вы не увеличите.

Почему когда переворачиваешь экран, сайт показывает планшетную версию, а не мобильную?

• либо JS городить (ХЗ что)
  
• либо прописывать к @media-запросам ещё и максимальную высоту, запрос ориентации тут не особо поможет, кстати
  
• либо увеличить 540 пикселей до какого-то значения (iPhone X, к примеру, очень широкие в альбомом режиме, так что это не панацея)
  
• либо смириться
  

Вообще, это нормально так-то на самом деле.

Почему изображение в кодировке base64 не отображается в Google Chrome и Firefox?

Только в серверном алгоритме.