/* set padding and height to 100% */ | |
html, body, #mapDiv { | |
padding: 0; | |
margin: 0; | |
height: 100%; | |
font-family: sans-serif; | |
} | |
/* use flex and flex-wrap */ | |
.container { | |
display: flex; | |
flex-wrap: wrap; | |
height: 100%; | |
} | |
/* set all the section stacked vertically in mobile view*/ | |
.box { | |
width: 100%; | |
} | |
.heading { | |
font-size: 1.0em; | |
text-align: center; | |
min-height: 50px; | |
} | |
.heading h2{ | |
font-size: smaller; | |
} | |
.map { | |
height: 80%; | |
max-height: 700px; | |
} | |
#txtSearchText { | |
width: 74%; | |
} | |
#btnSearch { | |
width: 20%; | |
} | |
#divMain{ | |
width: 100%; | |
height: 100%; | |
} | |
/* results will be off the screen at first | |
when the search button is pressed, | |
it will slide in from the left. | |
*/ | |
#divResults{ | |
overflow:scroll; | |
width: 300px; | |
height: 100%; | |
position: absolute; | |
transform: translate(-300px, 0); | |
transition: transform 0.3s ease; | |
background-color: lightyellow; | |
} | |
/* Set this property from javascript to make the results | |
to slide into view */ | |
#divResults.open { | |
transform: translate(0,0); | |
z-index: 101; | |
} | |
/* adjust the logo at the bottom of map */ | |
#OneMapLogo { | |
bottom: 5px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment