Проблема с версткой сайта?

Question

[Mrkliner]

Делаю верстку сайта для себя. Тут у меня возникла проблема с написанием стилей для этой части сайта - . Подскажите пожалуйста, знающие люди, как можно выполнить эту часть сайта адаптивной. Мой текущий код:

<div class="content" style="width:100%">
			<div class="community-header" style="height: 375px;width: 100%;">
				<div style="">
					<img class="community-footage" src="http://t2.gstatic.com/licensed-image?q=tbn:ANd9GcSAvFC2aX-ZGzIAAODII9YkGrOu7nhKzYX0bJpq6gFMHYCwht4LlMAmQd_KBvH3aj-hYAWbEkYFsX9wAyG3oDI">
					<img class="avatar" style="margin-top: calc(360px / 2);"  src="http://t2.gstatic.com/licensed-image?q=tbn:ANd9GcSAvFC2aX-ZGzIAAODII9YkGrOu7nhKzYX0bJpq6gFMHYCwht4LlMAmQd_KBvH3aj-hYAWbEkYFsX9wAyG3oDI">
				</div>
			</div>
		</div>

И стили:

.community-footage {
	border-radius: 24px;
	position: absolute;
	height: 297px;
	position: absolute;
}
.avatar {
	height: 183px;
	width: 183px;
	border-radius: 316px;
	margin-top: calc(187px / 2);
	border: solid 8px white;
	position: absolute;
	margin-left: 10px;
	z-index: 1;
}

Comments

[Ankhena]

И стили:

Там какой-то легкий бред почти в каждой строке.
Нашла две с половиной адекватные строчки
border: solid 8px white;
border-radius: 24px;
и с натяжкой width: 183px;, если вас устраивает фиксированный размер.
Абсолюты, дикий calc - убрать, остальное переписать.

border-radius: 316px; -> border-radius: 50%; вы же не будете менять пиксели при смене размеров картинки.
margin-top: calc(187px / 2); - если я правильно поняла вашу затею, то он должен быть отрицательным. Но логичнее заменить на 50% трансформ, опять же, чтобы не считать.

margin-left: 10px; - скорее это паддинг блока, а не марджин каждого из элементов.

как можно выполнить эту часть сайта адаптивной

Вот вообще любым из приёмов адаптивной вёрстки: флексы, гриды, единицы от вьюпорта или контейнера в компании с @media или без него.

Для того, чтобы делать что-то адаптивным нужно сначала представить, как оно себя должно вести при изменении ширины. А потом уже решать какие из методов применять.

[ThunderCat]

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

Уточню месадж Ankhena - сначала определитесь КАК должно выглядеть ваше изделие в базовых разрешениях, а затем уже решайте что для этого использовать. Ну и базово свойства цсс и принципы верстки освоить неплохо бы. Алсо, посмотрите в сторону готовых цсс движков (например тэйлвинд/бутстрап), ну или хотя бы гляньте как в них решаются подобные вещи.