Как растянуть картинку на ширину блока указанным свойством padding?

Алексей Королёв, и что вы предлагаете, дописать css к этому и почистить код от инклюдов? )).

Залейте на тестовый домен

Адаптивный дизайн html белая полоса?

Veronica Cusniriuc, код в песочнице или ссылка на сайт были бы гораздо информативнее 1000 скриншотов. Тем более это записано в правилах сервиса. Сейчас вас модеры заругают ))

Можно еще парочку скриншотов? Плохо видно

Это был троллинг ))
Интересно, на каких курсах учат писать стили в index.html?

Как стать веб-программистом, а не кодировщиком?

Олег Смирнов, в "мозгу" может и нет, так как "он" эгоцентричен и думает, что самый умный ))). А средри психотипов людей есть ;). Просто судя по "1997" вы еще этого не поняли))

Почему не подключаются скрипты Bootstrap?

Зачем 5.0.0 alpha да еще и 1 ? Актуальный стабильный релиз 5.0.2.

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

rd100, да

Почему скрытые элеметны видно во время загрузки страницы?

это JQuery функции или вы предлагаете написать самому?

Лев Александров, да jq, просто для понятности написал. Да напишите сами, или напишите просто переключатель класса, что проще будет.
И в стеке свойств display: none; должен быть наряду с opacity visibility. То есть сначала резко срабатывает display: block а затем плавно opacity visibility. display избавит от этого мерцания.

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

Почему скрытые элеметны видно во время загрузки страницы?

У меня попап медленно появляется (opacity анимируется), а карточка съезжает вниз.

Лев Александров, Не придумывайте велосипед display: none и js методы fadeIn, fadeOut, slideXXX если плавно нужно

Bootstrap: как растянуть блоки с кнопками по краям modal окна?

Степан, теперь все нормально с колонками. Выравнивание работает как вы хотели. flex-row - лишний. По умолчанию во flex контейнере направление итак row.

Увидеть всё нормально не дает .container (слишком узкий и не отцентрован) и select который растягивается автоматом на максимальную ширину.

То есть для центровки контейнера нужно задать ему левый и правый марджин auto или растянуть его на всю ширину - ищите соответствующие классы. Для селект задать максимальную ширину - ищите соответствующие классы. Я не знаю их наизусть.

Пользуйтесь инспектором кода браузера - но покажет все. Определяйте все что нужно сделать через нативный css, а потом смотрите соответствующие классы в документации bootstrap

Bootstrap: как растянуть блоки с кнопками по краям modal окна?

Степан, ну вы не правильные классы добавили. Вам надо сделать обе колонки flex контейнерами и flex свойствами выровнять содержимое как вам надо. Ни одна из этих колонок в вашем коде не содержит класс d-flex. И причем здесь float-end float-start?

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

Но если вам трудно с этим справиться, то просто наймите фрилансера.

Почему ломается блок?

Ankhena, ок. Актуальными так актуальными ))

html,
body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
.main {
	flex: 1;
}
/*Добавьте к row свой класс чтобы не переопределять бутстраповский селектор*/
.row.your-class {
    height: 100%;
}

Почему ломается блок?

Ankhena, я понимаю )). Но есть существующая вёрстка. Так то, ее всю переписать надо, что бы не костылить такое)))

Почему ломается блок?

Никита Сальников, у вас итак сейчас есть скролл (вертикальный). Где-то, что-то мешает. Избавьтесь сначала от него.
Потом:

html, body {
	height: 100%;
}
.main {
	height: calc(100% - 57px); /*для компенсации высоты меню*/
}
/*Добавьте к row свой класс чтобы не переопределять бутстраповский селектор*/
.row.your-class {
	height: 100%;
}

И возможно еще какой то min-height для main или row надо добавить.
Бутстрап вообще-то здесь избыточен. Можно было сделать все на флексах или гридах.

Ну и в любом случае, если вы будете добавлять элементы по высоте, то скролл появится. Экран то не безразмерный.

Просто интересно, как вы это всё сверстали если основ не знаете?

Почему ломается блок?

Никита Сальников,

ее ведь не задают. и она автоматически устанавливается по количеству элементов.

По высоте контента, если быть точнее, что как раз у вас и происходит. Если хотите растянуть на высоту экрана то надо задавать. Кто сказал что ее не задают? Зависит от ситуации.

По поводу ширины я так понял надо процентах задавать?

У вас для третьей колонки стоят бессмысленные значения в своей комбинации
width: 75%;
max-width: 1290px;
Непонятно, что вы хотели этим добиться. Если делать логически правильно то растягиваете ширину на 100% и задаете ограничение максимальной шириной. Но это конечно не решение, а лирическое отступление для понимания.

В контексте Flex Box свойства ширины являются вспомогательными элементами. Необходимо использовать свойство flex. Удалите максимальную ширину и ширину и используйте этоflex: 1 1 auto;

Как сделать эффект рваного фото?

Есть еще вариант border-image

Как проверсти A/Б-тест в roistat, если сайт сделан на констуркторе сайтов Tilda?

mayeswoope, я изложил свою позицию выше. Самая очевидная вещь, SaaS - это зависимость от сервиса со всеми вытекающими ограничениями. Если для вас это не очевидно, что ж, каждый имеет право на свой опыт. Не вижу смысла в дальнейшей полемике с приведением пруфов и убеждения вас в чем либо. К тому же это всё офтоп. Решили проблему? - Отлично. Двигайтесь дальше и получайте опыт.

Выбрал редактор для Html(atom) и не могу понять почему в нем нет align?

Павел, sublime платный, atom бесплытный. И если уж выбирать из бесплатных то vs code получше всяких платных будет

Кнопочки и CSS переменные?

Например не очень понимаю, как можно было бы объеденить состояние в переменную

Так же как вы объединили --red-rgb-full и --gray-rgb-full. Вся калькуляция в root, а в элементах только целые, объединенные переменные.

Это так

Судя по реплике, вам это не нужно. Но я не знаю вашу авторскую задумку и то, что вы пытаетесь построить. Например можно было бы не разделять rgb на каналы в виде отдельных переменных. Или можно было бы использовать rgba с разными значениями альфа канала. То есть всё это записать гораздо проще, с меньшим количеством кода.

Ваш вопрос в целом не имеет отношения к переменным, так как с ними всё просто - объявляете, калькулируете что надо, добавляете в свойство элемента.

Тут больше вопрос работы с цветами - их микширование. А логика всего этого зависит только от вашей задумки.

Как привести все ячейки к одному размеру (CSS Grid)?

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

Перенос статей в Joomla 4 - как?

Дмитрий Рекун, Пока мало что совместимо. Перед обновлении преапдейт чекер показывает что совместимо, а что нет. Соответственно все что не совместимо надо удалять

Как проверсти A/Б-тест в roistat, если сайт сделан на констуркторе сайтов Tilda?

mayeswoope, ну да, буду смеяться. А я тут распинаюсь, думая что новичок. Если всё так как ты говоришь, то есть есть навыки, то к чему этот вопрос был вообще? 0_о. Должен был решить эту элементарную задачу сам, как два пальца об асфальт. Может ты не ушел, а рано сдался? ))

Что касается Тильды и прочих SaaS, когда клиенты немного "подрастают" и начинают понимать, что это такое, они приходят ко мне за переносом на Joomla, Wordpress, Opencart или в код. Десятка полтора сайтов с Тильды перенес за прошедший год.
SaaS хороши только для быстрого теста "ниши", чтобы не вкладываться в разработку, пока нет уверенности в спросе. Но как долгосрочные проекты использование их - это утопия.

Интересно почему это известный тренер по Тильде держит свои проекты на Wordpress? )))