Блог

У меня есть карта mapbox внутри карты, которую я наконец-то «вписал», но она не реагирует и выглядит ужасно на мобильном телефоне. Я бы хотел, чтобы он уменьшился вместе с контейнером страницы/карточки.. как мне заставить карту реагировать?

 <div class="row">
    <div class="col-6 offset-3">
        <div class="card mb-3">
          <div class="card-body mb-4">
            <div id="map-container">
              <div id="map">
              </div>
            </div>
          </div>
      </div>
   </div>
</div>
 

Вот моя таблица стилей app.css

 #map-container {
    position: relative;
    height: 180px;
    width: 600px;
}

#map {
    position: relative;
    height: inherit;
    width: inherit;
}
 

Возился с кодом и заставил его работать. Ответ ниже:

 #map-container {
    height: 180px;
    width: 100%;
}

#map {
    position: relative;
    height: inherit;
    width: inherit;
}