How do I make mapbox map responsive inside of card?

user_11846808 0
Viewed 264

I have a mapbox map inside of a card that I've finally gotten to "fit" but it's unresponsive and looks terrible on mobile. I'd like it to shrink with the page/card container.. how do I get the map to respond?

<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>

Here's my app.css stylesheet

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

#map {
    position: relative;
    height: inherit;
    width: inherit;
}
mapbox css javascript
1 Answers

Was tinkering around with the code and got it to work. Answer below:

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

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