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

6 years ago

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

Chris Comben 0 points

6 years ago

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

Drew McLellan 2638 points
Perch Support

6 years ago

What happened?
Chris Comben

Chris Comben 0 points

6 years ago

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>
Chris Comben

Chris Comben 0 points

6 years ago

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

6 years ago

Great!