Forum

Thread tagged as: Problem, Runway

Responsive Map

Has anyone had any luck with a responsive map at all? I'm struggling with the following code:

<style type="text/css">
    div.map {
        display: inline-block;
        padding:10px;
        border-radius: 5px;
        border: 1px solid #fff;
        border-image: linear-gradient(to bottom, #000000 0%,#ffffff 100%);;
        box-shadow:inset 0 0 10px 0 #888;
        background-color: #fff;
    }
    .cmsmap {
        min-width: 200px;
        min-height: 200px;
        max-width: 500px;
        max-height: 500px;
    }
    .cmsmap img {
        max-width: none;
    }
</style>

<div class="map"><perch:content id="map" type="map" label="Location" zoom="15" /></div>

It says in a tiny window, rather than fitting into the space.

Chris Comben

Chris Comben 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

It looks like you're not setting a witch at all. Have you tried?

I initially had width:100%, but it didn't like that.

Drew McLellan

Drew McLellan 2638 points
Perch Support

What happened?

With the following code nothing appears at all, you briefly see the Map as the page builds but it disappears.

<style type="text/css">
    div.map {
        display: block;
        width: 100%;
        max-height:400px;       
    }
    .cmsmap {
        width: 100%;
    }
    .cmsmap img {
        max-width: none;
    }
</style>

<div class="">
    <div class="map"><perch:content id="map" type="map" label="Location" zoom="15" /></div>
    <div class="cf"></div>
</div>

It appears its the height thats important, I've gone for a fixed 400px and thats worked. So my full code incase anyone is interested is:

div.map {
    display: block;
    width: 100%;
    height:400px;
    margin-bottom: 40px;    
}
.cmsmap {
    width: 100%;
    height:400px;
}
.cmsmap img {
    max-width: none;
}

<div class="">
    <div class="map"><perch:content id="map" type="map" label="Location" zoom="10" /></div>
    <div class="cf"></div>
</div>
Drew McLellan

Drew McLellan 2638 points
Perch Support

Great!