Making width 100% so it fills space in responsive screen size

[ejntaylor]

On smaller screens the container increases in size, but the map does not.

It seems the map canvas width and height is generated and injected into the dom element.

eg. <canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" width="400" height="257" style="width: 400px; height: 257px;"></canvas>

I am unable to override the width with css.

Any ideas how I can make the map canvas expand to fill the parent container.

Thanks

[sdrios]

You can select the canvas element inside the map container and set it to width:100%;.

Here is an example with less `

map {

width: 100%;
height: 88vh;
canvas {
  height: 100%;
  width: 100%;
}

} `