1. Copy and paste the Easy Locator HTML code (V.3. Side-by-side Layout) then change the width to width="100%" or width="auto"
2. Add the following responsive CSS to your interface settings in the 'Advanced CSS' field:
----------------------------------------
/* Begin Easy Locator Responsive CSS */
html,
body,
#home,
div[data-role=content],
#container,
#box1,
#box2{
height: 100%;
}
#container {
min-height: 100%;
}
#container, #map_canvas_1 {
width: 100%;
padding: 0;
}
#box1 {
width: 78%;
/* width: calc(100% - 360px); */
}
#box2 {
width: 22%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.fieldwrap {
width: 100%;
}
#results_header {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1;
}
#results_header_container, #results {
margin-left: 10px;
}
@media (max-width: 1024px) {
#box1 { width: 74%; }
#box2 { width: 26%; }
}
@media (max-width: 992px) {
#box1 { width: 70%; }
#box2 { width: 30%; }
}
@media (max-width: 768px) {
#box1 { width: 65%; }
#box2 { width: 35%; }
}
@media (max-width: 540px) {
#box1 { height:250px; width:100%; }
#box2 { top:250px; bottom:0; height:auto; width:100%; }
#results_header_container, #results_header, #search_options_box, #search_options_box_right, #search_filter_box, #search_filter_box_right, #search_filter_box2, #search_filter2_box_right { display:none; }
#results .location:first-child { border-top:none; }
#results_header_container, #results {
margin-left: 0;
}
#map_canvas_1 { height:100%; }
#frmsearch #autoDetectButton {
width: 18px;
padding-left: 18px;
text-indent: -999px;
}
}
@media (max-width: 440px) {
#results_header, #results .location, #no_results { padding:10px; }
}
@media (max-height:400px) {
#box2 { display:none }
#box1 { position:fixed; top:0; bottom:0; height:auto; width:100%; }
}
/* End Easy Locator Responsive CSS */
----------------------------------------