My website works well on different devices but it seems that only works with images, although I would like to show other media, like Leaflet maps and videos.


iPad Portrait

iPad Landscape


Just about all pages are laid out on a grid using classes.


Here is the current html code for one image:

<div class="container">

  <div class="row">
    <div class="col-sm-4">
      <p class="lead">Cityscapes have a uniquely vibrant feel to them which is unlike any other form of landscape. In creating ours we employ a variety of techniques, including hand drawing, watercolor and digital.</p>
      <br><p class="h5 text-right palette-coral">Downtown Manhattan</p>
    <div class="col-sm-8 overlap-sm">
        <span class="picturefill-medium" data-picture data-alt="Downtown Manhattan">
          <span data-src="../../img/work/cityscapes/lowerManhattan01_298.jpg"></span>
          <span data-src="../../img/work/cityscapes/lowerManhattan01_482.jpg" data-media="(min-width: 480px)"></span>
          <span data-src="../../img/work/cityscapes/lowerManhattan01_644.jpg" data-media="(min-width: 992px)"></span>
            <img src="../..../../img/work/cityscapes/lowerManhattan01_298.jpg" alt="Downtown Manhattan">

Each image has three size versions and depending on the width of the viewer's screen the right one is loaded.

In the past I tried to display videos in the same framework (span) but I was not able, so I settled for screen shots with links to an external page to see the video.

Now I want to be able to display Leaflet maps on the same grid but I tried various html code and it didn't work.

For example, I tried the code below, but regardless of the width of the screen the div with 298px is loading:

<span class="picturefill-medium" data-picture data-alt="Downtown Manhattan">
  <span><div id="mapid" style="width:298px; height: 298px;"></div></span>
  <span  data-media="(min-width: 480px)"><div id="mapid" style="width:482px; height:482px;"></div></span>
  <span  data-media="(min-width: 992px)"><div id="mapid" style="width:644px; height: 644px;"></div></span>


Any advice?

  • Which dynamic framework are you using? How do other web sites behave in your framework? – TomazicM Oct 18 '19 at 14:39
  • Maybe I misused the term "framework". There are no other sites, just this one. – Horia Popa Oct 18 '19 at 14:58
  • I didn't formulate my question clearly enough. What I'm interested in is how other web sites (not Leaflet based) behave if you put them in your framework in place where you want to put Leaflet based site? – TomazicM Oct 18 '19 at 19:37

You need to define an absolute height on the parent element and then you can set height: 100% on the map container:

.wrapper {
  height: 300px;

#map {
  height: 100%;


So in your case the HTML should look like this:

<span style="width:298px; height: 298px;"><div id="mapid" style="height: 100%;"></div></span>

PS.: If you encounter weird things when you change orientation of the device, you should call invalidateSize() on the map.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.