G’day azlivin008,
100%… of what? 🙂
When using relative dimensions, you need to ensure that the container has some dimensions itself. Check through your containing elements to find where this is breaking down, and add width 100% to that element.
cheers,
Ross
My container element is defined in functions, but the map was not picking it up on desktop (mobiles seemed to pick up the width, but displayed the map slightly off-center).
In case anybody else is still having issues with maps inside of tabs, I found a somewhat simple solution by creating a .map-canvas class in css with widths defined in vw & vh dimensions instead of px or %. I wrapped flexible map that was hidden inside the tab in the class=”map-canvas”, then made the map width=”100% and height=”100%” in the shortcode of the map.
For anybody else looking for a somewhat easy solution without having to deal with js, changes to functions.php or extra plugins, here is what I did:
in your css file add:
/* to handle large desktop with content & sidebar */
.map-canvas {width: 55vw; height: 50vh; margin 0 auto; }
/* to handle devices with one-column or landscape mobiles add */
@media only screen and (max-width: 700px) {
.map-canvas {width:85vw; height: 90vh; }
}
/* to handle portrait view of smaller devices add */
@media only screen and (max-width: 480px) {
.map-canvas {width:90vw; height: 75vh; }
}
Then, wrap your map shortcode inside the div class:
<div class="map-canvas">[flexiblemap shortcode here width="100% height="100%]</div>
Play with vw & vh dimensions as needed for your site and preferences. It’s not perfect, but it’s easier than anything else I’ve found & I was able to test it on large monitor 1920×1080 desktop, Samsung Note3 mobile and kindle fire HD tablet.
