Как правильно и без костылей сделать адаптивную страницу 404?

Ну вот - кратко и по сути :-). Спасибо.

Как правильно и без костылей сделать адаптивную страницу 404?

Ankhena, Одна страница сайта.
А метатегов масса существует). Описание контента, для соцсетей и т.п. Я так понимаю, что надо смотреть что именно будет на 404й странице и отталкиваться от этого? Т.е. при наличии отсылки на соцсети прописывать соотв. метатеги и т.п. Так?

Как правильно и без костылей сделать адаптивную страницу 404?

Арсений Матыцин, Не въехал).
Ок. Тогда конкретизирую.
Как правильнее поступить:
1. Прописать стили (и медиазапросы) для 404 в основной файл CSS.
2. Прописать стили (и медиазапросы) для 404 в отдельный файл CSS (есть ли разница где он будет локально - в папке CSS или в корне?).
3. Свой вариант.

Ну и о метатегах хотелось бы узнать тоже как надо правильно и без лишнего кода прописать для 404.

Как правильно и без костылей сделать адаптивную страницу 404?

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

Так вот и вопрос то в том куда писать стили? В отд. файл или мешать в основной CSS?
В html писать не вариант т.к. там не пару строчек будет.

Как правильно и без костылей сделать адаптивную страницу 404?

Требует стилизации). Есть дизайны в Фигме и их надо реализовать.

При hover'е на кнопку прыгает цвет (именно цвет). Почему?

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

При hover'е на кнопку прыгает цвет (именно цвет). Почему?

Вадим, пока я писал комент вы добавили вторую ссылку. Я не такой быстрый как вы, к сожалению).

Вот по этому линку:

Потому https://qna.habr.com/q/492359

Вот пример из вопроса по линку выше

При hover'е на кнопку прыгает цвет (именно цвет). Почему?

Там в примере расписан бэкграунд не одной строкой. Как его вытянуть из Фигмы в таком виде?
Или в какую сторону копать чтобы изучить этот вопрос?

И при ховере в примере:

background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);

Откуда эти значения? Или надо просто перечитать инфу о градиентах?

SVG background - как правильно сделать адаптивным?

Ankhena, Ок. Спасибо за неоднократную помощь!)

SVG background - как правильно сделать адаптивным?

Ankhena, Ааа, т.е. виной всему неадаптированный контент? Значить если фон в формате СВГ то его надо адаптировать в посл. очередь дабы неадаптированный контент не сбивал с толку?

SVG background - как правильно сделать адаптивным?

Вот секция с этим СВГ фоном - https://jsfiddle.net/Kindermns/fptwsL02/13/

В процесе экспериментов я решил поставить фон для , который находится в container и как результат - при изменении ширины экрана фон не режется и вроде всё норм. Прописал ему:

background-size: cover;
background-repeat: no-repeat;
background-image: url(/img/back_2_section.svg);

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

SVG background - как правильно сделать адаптивным?

Spartak (Web-StyleStudio), IE не поддерживает. И это свойство прописывается к img, а у меня SVG вставлено бэкграундом.

SVG background - как правильно сделать адаптивным?

Спасибо. Но там общие понятия описаны и об СВГ нет информации.

SVG background - как правильно сделать адаптивным?

Рустам Байназаров, я начал с бэкграунда. Для остального контента ещё ничего не прописывал в медиа-запросах.
Насколько я понял из самостоятельных поисков решения для адаптивности фона, что оно может быть в способе подключения СВГ как фона. Я подключил так, как в коде выше. Не знаю, как правильнее.

SVG background - как правильно сделать адаптивным?

Рустам Байназаров, прочитал, прописал разные варианты. Не помогает.

Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

Ankhena, secretsergey хорошо, вроде разобрался, спасибо за ЛикБез)!

Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

Ankhena,

А надо, чтобы оно позиционировалось относительно container (т.е. так, как оно изначально прописано, без сдвигов влево-вправо и желательно чтобы фон меню был растянут и на body, а сам контент меню начинался у левой границы контейнера - как на скрине).

Вот цитата из моего вопроса. И на скрине видно, что фон на ширину боди, а контент ровняется по левой границе контейнера. Может я не так сформулировал вопрос - тогда, сорри.

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

Ну, оно не будет меняться т.к. я себе делаю сайт). Но. Если уж делать то так, как надо).
Т.е. при добавлении контента в меню оно будет изменять отступы слева-справа, что есть не гуд. Правильно я понял?

В такой формулировке точно нет.

Ок. Такая формулировка должна быть (взял из MDN): "Исторически HTML-элементы было принято делить на блочные и строчные. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название)"?

Вот простейший пример, опровергающий ваше определение https://jsfiddle.net/tyu8k64f/

Пример не понял т.к. там просто див в боди. И боди и див блочные.
Ладно. Суть вопроса была в позиционировании, всё-таки).

Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

Ankhena, да, с шириной 100% работает.
Разве блочный элемент не занимает всю ширину браузера?) А при position: fixed; ширина элемента ограничивается по контенту в нём.

И ещё вопрос - не проще ли (да и кода меньше) прописать для nav justify-content: center; ну и padding: 20px 0; (как советует secretsergey выше в коментах)? Проверил - тоже рабочее решение. Как лучше с точки зрения человека с большим опытом чем у меня?

Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

Ankhena, ок, спасибо. Но вы применили position: sticky; А надо position: fixed;
Если в вашем коде изменить на position: fixed; то header так же позиционируется по левому верхнему углу браузера и становиться инлайн.

Position: fixed; На другом разрешении съезжает. Как пофиксить и есть ли особенности его вёрстки при адаптиве?

Ankhena, Что это даст?
Вот такая вложенность для меню:

<body>
  <header class="header" id="header">
    <div class="container">
      <div class="nav-container">
        <nav class="wrap d-flex align-items-center navfix">
          <a href="#" class="logo">
            <img src="img/logo.png" alt="Логотип" class="logo__img">
          </a>
          <ul class="menu d-flex">
            <li class="menu__item">

Т.е., по сути, есть 2 обёртки с класом контейнер. Как это повлияет на ситуацию? Контейнеру надо дать клас релейтив?
И что нужно отделить чтобы разложить кашу на её составляющие?)