` in the HTML document. The browser console returns no errors. Any ideas how to get around this? Here’s my draft code, as it currently stands: ```auto

``` And here’s a picture of the rendered output: ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/7/7e4c9639bce9ad9a1edb65e9398638ab12ab30ca.png) ---

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\ **Post date:** [January 14, 2020, 7:15am UTC](https://talk.observablehq.com/t/calculating-width-in-embedded-leaflet-map/2741/2 "2020-01-14T07:15:06Z")

Sorry for not trying this earlier (and it doesn’t exactly answer my question), but: if I change in the source notebook this style definition: ```auto style: `width:${width}px;height:${width/1.6}px` }) ``` to ```auto style: `width:${800}px;height:${800/1.6}px` }) ``` … then the map will render. It also will render if I start out the map cell by defining width explicitly as `let width = 800`. But in neither case does the map render responsively ☹ Also a bit confusing for me (and probably part of the issue) is that in the choropleth example, there is no defined `width` aside from the scale (unless it’s getting this from `viewBox`?). So is it not also getting the width from `window.innerWidth` as per the [standard library](https://github.com/observablehq/stdlib#width)? Any insights? * * * I eventually found [this related discussion on overriding the standard library](https://talk.observablehq.com/t/embedded-width/), which resulted in Mike creating this demo: > Mike’s resize pattern is very similar to Torben’s and results in the same error on ‘width’ when I try to update the code to fit the new embed pattern (the gist was returning the same `Uncaught TypeError: r is not iterable` error addressed [here](https://talk.observablehq.com/t/overcoming-r-is-not-iterable-with-new-runtime-or-another-mistake/2729)): ```auto ``` * * * I also remain a bit confused about what does and doesn’t carry-over into an embedded cell. CSS won’t carryover, as noted in [Jeremy’s primer on embedding](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) (when I [learned to read it more carefully](https://talk.observablehq.com/t/embedding-leaflet-map-turns-wonky-requesting-help-to-diagnose/2728/2) thanks to @mootari ), but charts generated as the amalgams of multiple individual cells will render… except apparently when that cell is `width`? * * * Happy if someone can shed some light on what’s going on, and would greatly appreciate help in arriving at a responsive Leaflet map element. 🙏 ---

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\ **Post date:** [January 15, 2020, 1:20pm UTC](https://talk.observablehq.com/t/calculating-width-in-embedded-leaflet-map/2741/3 "2020-01-15T13:20:03Z")

Looks like I might have been going about this the wrong way, and that the height and width would be better controlled using CSS. Or, at least a few Internet articles are leading me to this conclusion… such as this one: > I did, however, find some JavaScript from @mourner that appears promising: > > > I tried to spread a map on to the full document. Unfortunately, when I set height css property as 100%, the... …oh, and there’s also this project related to getting leaflet to play nicely with bootstrap’s grid: > **[tforward/LeafShoot](https://github.com/tforward/LeafShoot)** > > Leaflet+Bootstrap Template. Contribute to tforward/LeafShoot development by creating an account on GitHub. … thought it seems like overkill. I’ll keep hacking away… but still would be very appreciative for any help, guidance and insights! ---

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [January 15, 2020, 6:41pm UTC](https://talk.observablehq.com/t/calculating-width-in-embedded-leaflet-map/2741/4 "2020-01-15T18:41:37Z")

> [@aaronkyle](#): > > I also remain a bit confused about what does and doesn’t carry-over into an embedded cell I’d avoid phrasing it like that. Whatever a cell that you explicitely render returns/outputs gets added to the page: 1. If a cell outputs CSS (be it as ` ``` and it works swimmingly: [https://aaronkyle.github.io/concept/data-visualization/sandbox/leaflet-responsive-upfront-css.html](https://aaronkyle.github.io/concept/data-visualization/sandbox/leaflet-responsive-upfront-css.html) 🙂 Thanks for continuing to follow this & for helping me out!!! ---

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [January 19, 2020, 10:34am UTC](https://talk.observablehq.com/t/calculating-width-in-embedded-leaflet-map/2741/11 "2020-01-19T10:34:36Z")

It looks like you’re actively forcing an inline width in your inner container: ```auto let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); ``` Remove that, and the outer inline style will apply as expected. Also, be aware that referencing `width` will force your map to reinitialize on every resize. In general I’d avoid using rules that modify the internal CSS of maps (leaflet or otherwise) like your `#mapX div` rules, as those can throw off both the map UI and interactions. If you want to only override the inner container’s inline CSS you can use: ```css #mapX > div {max-width: 123px !important} ```