Как лучше отобразить создаваемый нажатием div в grid контейнере?

Идея в том, чтобы данный div card появлялся между div недели, под выбранной датой и занимал +/- размер одного row

Кажется, на скрине нарисовано вообще не то.
Я бы рекомендовала нарисовать то, как оно должно себя вести и куда попадать.

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

Может быть, пока вам поможет аналогичный вопрос
Как реализовать развёртывание div на всю ширину с переносом соседних блоков?

Как заменить псевдокласс has?

tgarl,

Вот мне и дали задачу поискать можно ли переделать без изменния верстки

Вот и используйте appearance. Прекрасное решение без костылей, в отличие от текущего. И не требует изменения разметки.

Почему google и yandex не видят обновленный файл robots.txt?

уже как неделю

Когда вы их добавляли, что там было написано о сроках? Прочитали? И чего вы тогда ждете через неделю?

Что можно сделать с этим?

Ничего, ждать

Как записать кол-во успешных прохождений капчи/пароля на js?

Считайте клики по ссылке.

Как создать такую вот кнопку как на изображении?

Я бы попробовала разбить на 2 или 3 фигуры в зависимости от красоты анимации.
Делаем исходную кнопку.

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

Либо забыть про переполнение и делать подложку из svg, при наведении включать анимацию.

Ещё альтернатива: комбо этих вариантов: кнопка как была, при наведении запускаем анимацию svg, которой изначально не видно.

Дергается анимация снега, почему и как исправить?

Александр Васильев, Или опцию включения снега, если он по какой-то причине ещё развлекает посетителя.

Снег был крутым 20 лет назад.

Я бы попробовала уменьшить количество снежков.

Например:
Делаем кнопку "Получить новогоднее настроение" - включаем снег.
Кнопки меняются на две: "вернуть как было" и "добавить снега".

Если прям очень хочется, чтобы изначально шел, начинаем с небольшого снегопада.

Как заменить псевдокласс has?

Есть верстка где используется псевдокласс :has()

Странная, конечно, логика у того, кто так писал.
Потому что свойство appearance: none, которое позволяет стилизовать радио и чекбоксы напрямую, поддерживается большим количеством браузеров.

Как можно такую конструкцию заменить?

Изменить разметку и использовать составные селекторы ~ или +

Но я бы через appearance проверила.

Как картинку сделать кнопкой?

Если важно, то суть кнопки, это переключение между табами.

Вероятнее всего это фон кнопки.
Вряд ли это контентная смысловая картинка, а не иконочка.

Подскажите, что не так я делаю, и как поправить?

Про всплытие и погружение событий забыли?

Обязательно ли создавать контейнер?

Нужно ли для нее создавать отдельный контейнер другой ширины или можно не создавать контейнер?

Обычно не для неё, а для контента внутри. Потому что это секция является блоком, не важно БЭМ у вас или нет.

Обязательно ли создавать контейнер?

Ну это как вам удобнее верстать.

Но как тогда отцентрировать элементы внутри секции

1. Гриды.
Флексы чуть в меньшей степени.
2. Вешать фон псевдоэлементом от контентной части
3. Паддинги через calc
Ещё как-нибудь, что не пришло в голову прямо сходу.

Общепринятый и стабильный вариант это секция и внутри контейнер-центровщик.

Не могу разобраться почему before не становится по центру li (Оставил код ниже чтобы более понятно)?

Ян Уланов, ну логично.
Про высоту строки написала выше.

Не могу разобраться почему before не становится по центру li (Оставил код ниже чтобы более понятно)?

Ян Уланов,

Так мне нужна середина по горизонтали относительно текста

Может, всё таки речь про вертикаль?
Но вы супер формулируете вопросы. Ведь в исходном ничего нет про середину первой строки. Имеет смысл научится это делать, чтобы получать ответы быстрее.

Если середина первой строки, то это шрифт (1em), умноженный на line-height. Плюс учитывайте отступы, если они отличны от нуля.

Очень удобно использовать кастомные свойства для line-height, чтобы не менять два раза, если придется корректировать.

Не могу разобраться почему before не становится по центру li (Оставил код ниже чтобы более понятно)?

Ян Уланов, Дичь какая-то.

Зачем вы приплели сюда тег FLEXBOX, если ставите псевдо абсолютом?

Конкретно не могу понять почему красный пункт не становится по центру .list2__item2. Что не так делаю?

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

top: 50%;
transform: translate: -50%;

Ну или используйте тот самый флекс или грид и их стандартные свойства.
Также хочу напомнить о стандартном инлайн-блоке и vertical-align.

p.s. Вертикальное центрирование будет выглядеть очень странно, если строк будет больше, чем одна.

Как добавить анимацию div?

Поддерживаю комментарий выше.

Если что, 5 строк это 5 размеров шрифта умноженных на line-height с возможными корректировками на отступы и нюансы шрифта.
Т.е. решить всё можно на CSS, используя JS лишь для смены класса.

Если на web сайте можно посмотреть исходный код то как это сделать в андроид приложении?

John Didact,

но я продолжу его

Не стоит. Потому что он не имеет отношения ни к основному вопросу, ни к этому ответу.

Если на web сайте можно посмотреть исходный код то как это сделать в андроид приложении?

John Didact,

это именно исходный код ответа сервера

Не исходный код сайта.
Там вообще может быть один дивчик с id="app" и делай с этим что хочешь.

То, что показывает dev tools — не всегда является исходным кодом.

Разумеется.

Если на web сайте можно посмотреть исходный код то как это сделать в андроид приложении?

John Didact, только это не исходный код сайта. В лучшем случае его часть.
И это не тот код, который показывает dev tools.

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

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

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

dmitriypur, вы серьезно верите, что можно угадать, что у вас в коде по скринам? И даже намек не помог?

Нужно сделать песочницу с видимой проблемой, например, на codepen.io.
Есть шанс, что сами догадаетесь в чем дело, пока готовите её.

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

Подскажите, можно ли это исправить?

Наверняка

Как адаптировать изображения так, чтобы при max-width 100% они не пропадали при ширине экрана 900Px?

И почему вы не можете задать минимальную ширину?

Или красиво перестроить блоки.