Title: Full height map
Last modified: November 14, 2018

---

# Full height map

 *  Resolved [Gncfrsh](https://wordpress.org/support/users/agencefrsh/)
 * (@agencefrsh)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/full-height-map/)
 * Hi everybody ! 🙂
 * It is possible to have a full height map ?
    In the settings page we need to put
   a map height in pixel, so the map height is not responsive…
 * I found some tips to do that like in this page :
    [http://www.d3noob.org/2014/02/make-your-leafletjs-map-full-screen.html](http://www.d3noob.org/2014/02/make-your-leafletjs-map-full-screen.html)
 * …but it doesn’t work with the WP Leaflet plugin (maybe because we use a shortcode
   instead of full html tags).
 * Have you got an other solution ?
 * Thank you !

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [bozdoz](https://wordpress.org/support/users/bozdoz/)
 * (@bozdoz)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/full-height-map/#post-10879713)
 * You could use this or something like it in your CSS:
 *     ```
       .leaflet-map {
         height: 200px !important;
       }
   
       @media only screen and (min-height: 500px) {
         .leaflet-map {
           height: 400px !important;
         }
       }
       ```
   
 *  Thread Starter [Gncfrsh](https://wordpress.org/support/users/agencefrsh/)
 * (@agencefrsh)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/full-height-map/#post-10879791)
 * Thank you for your help. 🙂
 * It’s the only way to have a full-height map with the plugin ?
    Because your code
   is not responsive, unless if I insert media queries for each screen size. (Furthermore,
   with this code, the container’s height changes but not the map’s height.)
 *  Plugin Author [bozdoz](https://wordpress.org/support/users/bozdoz/)
 * (@bozdoz)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/full-height-map/#post-10879883)
 * Right; the map will need to trigger a refresh somehow on resize. So, that means
   there would need to be a javascript component to this as well. Something similar
   to what is described here would need to happen: [https://stackoverflow.com/questions/24412325/resizing-a-leaflet-map-on-container-resize](https://stackoverflow.com/questions/24412325/resizing-a-leaflet-map-on-container-resize)
 *  Plugin Author [bozdoz](https://wordpress.org/support/users/bozdoz/)
 * (@bozdoz)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/full-height-map/#post-10879891)
 * alternatively, perhaps you could try using viewport height instead of percent
   for height:
 *     ```
       .leaflet-map {
         height: 100vh !important;
       }
       ```
   
 *  Thread Starter [Gncfrsh](https://wordpress.org/support/users/agencefrsh/)
 * (@agencefrsh)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/full-height-map/#post-10880091)
 * It works! 🙂
 * In a small screen, the map zoom remains in the same level so my map is too big
   but I think we can’t change that depending on window size…
 * Thanks a lot for your help and for your nice plugin!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Full height map’ is closed to new replies.

 * ![](https://ps.w.org/leaflet-map/assets/icon-256x256.png?rev=1693083)
 * [Leaflet Map](https://wordpress.org/plugins/leaflet-map/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/leaflet-map/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/leaflet-map/)
 * [Active Topics](https://wordpress.org/support/plugin/leaflet-map/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/leaflet-map/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/leaflet-map/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Gncfrsh](https://wordpress.org/support/users/agencefrsh/)
 * Last activity: [7 years, 6 months ago](https://wordpress.org/support/topic/full-height-map/#post-10880091)
 * Status: resolved