0

Блок с формой перекрывает footer на маленьких экранах девайсов. Верстаю с bootstrap 4. Вроде все как по документации сделал. А все равно не получается. На первом скрине выделен футер. На втором скрине как должно быть.. введите сюда описание изображения

введите сюда описание изображения

#second {
	background: #f7f7f7;
	max-width: 1040px;
	margin: 0 auto 88px auto;
	padding: 1px;
	-webkit-box-shadow: 0px 8px 7px 3px rgba(0,0,0,0.22);
	-moz-box-shadow: 0px 8px 7px 3px rgba(0,0,0,0.22);
	box-shadow: 0px 8px 7px 3px rgba(0,0,0,0.22);
}
.second_content_center {
	margin: -88px auto 0 auto;
	padding: 1px;
	background: #fff;
	height: 650px;
	position: relative;
	z-index: 9;
}
.form_contacts_left h4 {
	font-size: 18px;
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.form_contacts_left span {
	font-size: 16px;
	font-weight: 100;
}
.form_contacts_left_email_icon {
	margin-right: 26px;
	margin-bottom: 47px;
}
.form_contacts_left_phones_icon {
	margin-right: 33px;
	margin-bottom: 47px;
}
.form_contacts_left_skype_icon {
	margin-right: 26px;
}
.form_contacts {
	background: #11b2f5;
	width: 100%;
	border-radius: 4px;
	margin-top: 50px;
	padding: 1px;
}
.form_heading_contacts {
	font-size: 25px;
	font-weight: 900;
	text-transform: uppercase;
	color: #fff;
	margin-top: 50px;
	margin-bottom: 15px;
}
.form_heading_contacts span {
	font-size: 20px;
	font-weight: 900;
	text-transform: uppercase;
	color: #fff;
}
.form_text_contacts {
	font-size: 18px;
	font-weight: 100;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 50px;
}
.form_input_contacts {
	width: 90%;
	height: 53px;
	background: #30c2ff;
	border: 1px solid #fff;
	border-radius: 3px;
	margin-bottom: 7px;
	padding-left: 35px;
}
.form_btn_contacts {
	width: 90%;
	height: 55px;
	background: transparent;
	border: 2px solid #fff;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	margin-top: 9px;
	cursor: pointer;
	margin-bottom: 40px;
}
.form_contacts_left {
	margin-top: 130px;
	margin-left: 20px;
}
.form_input_contacts::placeholder {
	font-size: 11px;
	font-weight: 300px;
	text-transform: uppercase;
	color: #b5e5ff;
}
.form_input_contacts:hover::placeholder {
	color: #fff;
}
	<section id="second">
		<div class="second_content_center">
			<h3 class="form_contacts_heading text-center">Мы всегда на связи и ответим на все интересующие Вас вопросы!</h3>
			<div class="container">
				<div class="row">
					<div class="col-lg-5 col-xl-5 col-sm-5">			
						<div class="form_contacts_left">
							<div class="form_contacts_left_phones d-block d-sm-flex">
								<div class="form_contacts_left_phones_icon">
									<img src="img/phones.png" alt="phones">
								</div>
								<div class="form_contacts_left_phones_text">
									<h4>Телефоны</h4>
									<span>В Болгарии  8 (123) 12-123-123</span><br>
									<span>В России     8 (495) 12-123-123</span>
								</div>
							</div>
							<div class="form_contacts_left_email d-block d-sm-flex">
								<div class="form_contacts_left_email_icon">
									<img src="img/email.png" alt="email">
								</div>
								<div class="form_contacts_left_email_text">
									<h4>E-MAIL</h4>
									<span>[email protected]</span>
								</div>
							</div>
							<div class="form_contacts_left_skype d-block d-sm-flex">
								<div class="form_contacts_left_skype_icon">
									<img src="img/skype.png" alt="skype">
								</div>
								<div class="form_contacts_left_skype_text">
									<h4>Skype</h4>
									<span>skypename</span>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-5 col-xl-5 col-sm-6 col-md-6 ml-auto text-center">
						<div class="form_contacts">
							<h2 class="form_heading_contacts">Есть вопросы<br>
								<span>по переезду в болгарию?</span></h2>
								<p class="form_text_contacts">Мы проконсультируем<br>
								Вас бесплатно!</p>
							<form action="#">
								<input class="form_input_contacts" type="text" placeholder="Имя"><br>
								<input class="form_input_contacts" type="email" placeholder="E_MAIL"><br>
								<input class="form_input_contacts" type="tel" placeholder="Телефон"><br>
								<button class="form_btn_contacts">Заказать консультацию</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
<footer id="footer">
		<div class="container">
			<div class="row">
				<div class="col-lg-2 col-5">
					<div class="footer_logo">
						<img src="img/logo.png" alt="логотип">
					</div>
				</div>
				<div class="col-lg-3 col-6 ml-auto">
					<div class="footer_protect">
						2016 / Все права защищены
					</div>
				</div>
				<div class="col-lg-3 d-none d-lg-block">
					<div class="footer_policy">
							<a href="#">Политика конфиденциальности</a>
					</div>
				</div>
				<div class="col-lg-3 d-none d-lg-block">
					<div class="footer_number_phone d-flex">
						<div class="footer_icon">
							<img src="img/footer_phone.png" alt="icon">
						</div>
						<div class="footer_phone">
							+7 (495) 12-321-345<br>
							+7 (495) 12-321-345
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer> 

1 ответ 1

0

Ответ найден. У .second_content_center задана фиксированная высота. Задал min-height - проблема решилась.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.