Как адаптировать блок с фиксированной шириной?

Question

[Mrako_bes]

Учусь верстать, делаю простой адаптивный сайт. Все блоки задавал в процентах и адаптировать их было просто. Добавил на сайт блок с формой с фиксированной шириной, но адаптировать никак не получается. Помогите советом.
html блока:

<section class="contact__form">
			<div class="contact__wrapper">
				<h2>CONTACT US</h2>
				<p class="lorem"><i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</i></p>
				<form action="#" name="newform" method="post">
					<div class="form__inputs">
						<p>Name <span class="red">*</span><br><input type="text"></p>	
						<p>Email address <span class="red">*</span><br><input type="text"></p>
					</div>
						<div class="textarea">
							<p>Message<span class="red">*</span></p>
							<textarea name="text"></textarea>
						</div>
					<div class="button__block">
						<input type="submit" value="SEND">
					</div>
				</form>
			</div>
		</section>

Comments

[Rustam Bainazarov]

width: 100%;
max-width: 600px;

[VegasChickiChicki]

А с помощью чего ты верстал? Скинь css стили этого блока. Просто если это гриды или флексы ,выставляешь их в колонку и задаешь им 100% ширину ,как вариант. Делаешь через медиа запрос ,когда они уже перестанут влезать в ширину экрана.

[Mrako_bes]

VegasChickiChicki, вот, весь блок.

.contact__form {
	padding: 100px 0 100px 0; 
}
.contact__wrapper {
	width: 753px;
	margin: 0 auto;
	color: #636363;
}
.red {
	color: red;
}
.form__inputs input {
	width: 360px;
	height: 40px;
	font-size: 20px;
	margin-bottom: 30px;
}
.form__inputs {
	display: flex;
}
textarea {
	width: 100%;
	height: 163px;
}
input, textarea {
	border: 1px solid #999;
	margin-top: 5px;
	box-sizing: border-box;
}
input:first-of-type {
	margin-right: 23px;
} 
.button__block {
	display: flex;
	justify-content: flex-end;
}
input[type=submit] {
	width: 165px;
	height: 40px;
	background: #fcac45;
	color: #fff;
	margin-right: 0;
	margin-top: 20px;
	border: none;
}
.contact__form h2::after {
	content: '';
	display: block;
	height: 3px; width: 100px;
	background: #fcac45;
	position: relative;
	margin: 30px auto 60px;
}
.contact__form h2 {
	text-align: center;
}
.contact__form h2 {
	color: #000;
	font-size: 44px;
}
form p{
	text-align: left;
}
.contact__wrapper .lorem {
	margin-bottom: 100px;
	color: #6c6c6c;
	text-align: center;
}

Answer 1

[VegasChickiChicki]

https://codepen.io/Poporo35/pen/YgyvBa Примерно так ,добавь эти стили в медиа запрос и все будет круто)

Comments

[Mrako_bes]

спасибо, я уже все сделал. там все в несколько строчек решается. ваш код не решает проблему с первыми двумя инпутами, которые заключены в параграфы. они просто, считай, что слились в один. там самое нормальное, просто написать flex-direction: column и задать ширину в 100%

[VegasChickiChicki]

Mrako_bes, Так я тут тоже самое практически сделал , убрал display: flex; , сделал инпутам и контейнеру 100% ширины и все. Может так будет наглядней https://codepen.io/Poporo35/pen/YgyvBa?editors=0100

Answer 2

[Freecreate]

Сперва html поять, и научиться верстать. А потом уже адаптивку делать.

Comments

[Mrako_bes]

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