@vovashaplin

Проблема адаптации блока с контактами на мобильной версии сайта?

У меня есть карта с position: relative, внутри нее блок с контактами с position: absolute
При переходе на мобильную версию хочу сделать, чтобы блок с контактами становился дефолтным и располагался ниже или выше карты, но точно не на ней
В запросе MEDIA менял его position на static, но браузер почему-то не хочет это воспринимать
(если что это не css а less)
@media (max-width: 576px)
	.contacts
		&-block
			position: static

.contacts
	padding-bottom: 60px
	position: relative
	&-block
		position: absolute
		top: 10%
		left: 10%
		width: 320px
		padding-top: 33px
		padding-bottom: 39px
		padding-left: 33px
		padding-right: 40px
		background-color: #fff

<section class="contacts" id="map">

		<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A613d0355ec3d80b4c3c5a319fae37ddd7a87b581addde8800bdcaea89cecc9ee&amp;width=100%25&amp;height=550&amp;lang=ru_RU&amp;scroll=false"></script>

		<div class="contacts-block">

			<div class="contacts-block__flex">
				<div class="contacts-block__icon">
				<img src="img/map.png" alt="map">
			</div>

			<div class="contacts-block__address">
				<span class="contacts-block__title">Адрес офиса</span><br>
				г. Уфа, Проспект октября, 46
				<br>
				<span class="contacts-block__title">Адрес склада</span><br>
				г. Уфа, ул. Майкопская, 65/2
			</div>
			<!-- /.contacts-block__address -->
			</div>
			
			<div class="contacts-block__flex">
				<div class="contacts-block__icon">
				<img src="img/map2.png" alt="map">
			</div>

			<div class="contacts-block__phone">
				<span class="contacts-block__title">Тел. отдела продаж:</span><br>
				8 (347) 271-54-28<br>8 (937) 363-30-00
			</div>
			<!-- .contacts-block__phone -->
			</div>

			<div class="contacts-block__cta">
				<button class="button contacts-block__btn">Заказать звонок</button>
			</div>
			<!-- /.contacts-block__cta -->
		
			<div class="contacts-block__flex">
				<div class="contacts-block__icon contacts-block__mail">
				<img src="img/map3.png" alt="map">
			</div>

			<div class="contacts-block__mail">
				<span class="contacts-block__title">Е-mail</span><br>
				urals.karton@gmail.com
			</div>
			<!-- /.contacts-block__mail -->
			</div>

		</div>
		<!-- /.contacts-block -->
	</section>
	<!-- /.conacts -->

вот сам сайт, для наглядности lovesomama.ru
  • Вопрос задан
  • 118 просмотров
Пригласить эксперта
Ответы на вопрос 1
@bogomazov_vadim
На этом блоке не висит медиазапроса.
Это точно less? Где фигурные скобки?
Скорее всего ошибка в синтаксисе.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы