lukoie

Я конечно извиняюсь, не могу до конца осознать что требуется, но почему в стилях нет z-index и @ media?
Судя по описанию, Вам и то и другое вроде как понадобится. Или я не правильно понимаю что Вам нужно?

я делал примерно так:

<section class="hero city-back">
	<div class="container">
		<div class="row">
			<div class="col-lg-12 text-center">
				<form action="#" class="search-form" id="mainsearch">
					<label for="main-search" class="main-search-label"></label>
					<input name="main-search" placeholder="Ищите и найдете..." title="main-search" class="main-search">
					<!-- <button class="btn btn-info">Искать</button> -->
					<div class="searcher">
						<div class="btn-group group-searcher">
							<div class="btn-group group-search">
								<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" id="search-dropper"></button>
								<div class="dropdown-menu dropdown-menu-right" id="mainsearch-dropdown">
									<div class="dropdown-header">Где искать</div>
									<input class="searchform-check-input" type="checkbox"></input>
									<div class="searchform-item">Документы</div>
									<div style="clear: both;"></div>
									<input class="searchform-check-input" type="checkbox"></input>
									<div class="searchform-item">Новости</div>
									<div style="clear: both;"></div>
									<input class="searchform-check-input" type="checkbox"></input>
									<div class="searchform-item">Статьи</div>

								</div>
							</div>
							<button type="button" class="btn btn-info btn-click">Искать</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>

Почитайте что такое единицы измерения em и rem
Потом будете для боди указывать базовый размер шрифта, от которого будут считаться размеры всего остального. И для мобайла это будет один размер, а для остального - другой. Вот и всё.
Упрощенно: если, например, для обычного body будет указан размер шрифта 12px а для медиа который будет указан для мобайлов, боди указать как 8px, то соответственно Ваш h3 можно указать размер в 3em и потому на десктопе он станет 36рх а на мобайле - 24рх.

Так цветовой профиль же подключен. Отключите его - и будете видеть как на самом деле монитор его показывает.

А что Вам мешает взять готовое решение? scroller.js например?

Сначала учите всё. Потом поймете общую картину. Потом постепенно с практикой поймете что Вам нужно знать и заучить, а что можно просто пользоваться подсказками ИДЕ или переиспользовать старый код.

Смотря каким редактором пользуетесь, и надо бы тут точный пример, а не сферический в вакууме.
Теги вопроса проставлены неверно. При чем тут Ваш вопрос к ХТМЛ или жаваскрипту??? Это скорей "текстовые редакторы".

Закомментируйте 13ю(и 1283) строку

Смотрите, этот пхп недостаточен. Это просто кусок кода для формы загузки файла. Из него мы только узнаем куда записываются файлы.
Но если некий Вася загрузит файл supervasya.jpg, то Вам же как то нужно записывать что некий пользователь с айди 42 имеет аватарку supervasya.jpg
Потом в хтмл Вам просто надо будет выводить обычно
<img alt="avatar" src="images/*"> и вот на месте звездочки надо будет брать для конкретного пользователя в БД имя файла, которое он залил
И это всё в условие всунуть
ЕСЛИ у айди есть запись про аватарку
ТО вывести картинку из директории имагес с именем как в строке записи БД для этой айди пользователя
ИНАЧЕ вывести images/default-avatar.jpg

Попробуйте полный абсолютный путь указать для проверки работоспособности.
И вообще, не видно же какие файлы у Вас лежат в папке css, может опечатались где-то, и написали например не английскую "с" а кирилллицей "", а визуально не замечаете этого.
И не забывайте в браузере жмать КОНТРОЛ+ф5

этот?
https://github.com/lukoie/nppemmet

кстати, видел плагин такой для вордпресса

Попробуйте посмотреть страницу с отключенными цсс стилями. И проверьте картинки, не загружаете ли Вы их в избыточном размере(а стили их показывают в размере, который Вы указали).

Дайте пример какого нибудь автоверстуна. Сделаю какой нибудь макетик тестовый, закину ему, и посмотрим какой код он выдаст. А тогда можно будет говорить.
Но с другой стороны, фронтендеры пользуются до сих пор терминалом, и командной строкой, когда есть и гуи-решения. И тем не менее, апдейтят именно эти терминальные, и пользуют терминальные. Тут вопрос тот же что у вас - почему?
Вот возьмем например:
git vs smartgit
composer vs composercat
gulp vs prepros
во всех трех случаях(версионирование, зависимости, сборка) есть инструмент командной строки, и есть гуи-аналог, в котором точно то же можно сделать просто кликая мышью и глядя наочно результат. Тем не менее, основная масса разработчиков пользуется именно командной строкой...

дежавю
только ж недавно обсуждали этот же вопрос
погуглите "rem vs em"
верстайте в пикселях пока и в процентах, и время от времени начинайте внедрять рэмы и эмы, потом само придет.

Да, это возможно, и реализаций есть множество.

Вот тут описываются все способы решений:
https://css-tricks.com/creating-non-rectangular-he...

добавляете класс mb-1 (или mb-2, mb-3, mb-4 ) к .main_menu
и лучше его переименуйти в что-то более отвечающее сути. это ж не меню у Вас.