Я работаю над проектом для введения в класс веб-дизайна, и у меня возникают проблемы с адаптацией моей карты.Мы работаем с Foundation 6, но на самом деле нам не разрешено редактировать базовый код, только наш исходный код.Первоначально у меня был html-код, подобный следующему: (со ссылкой для вставки на мою карту, где находится моя карта)
<div class="map-responsive">
<iframe src="map here" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
И CSS был установлен на:
.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;}
Однако, это добавляет довольно много отступов внизу, что мне не нужно, потому что это отделяет содержимое моей страницы от карты над ней.Я пытался удалить его, но из-за этого карта исчезает, когда она уходит на мобильный.Мне было интересно, есть ли способ сделать карту адаптивной, без нижнего отступа?