1) Inspect the source code
By inspecting the source code, I found that the page is designed using HTML Table. It is quite a simple page with only a few sections, each section embedded in table cell. I am going to use media query and flex boxes to make the page responsive.
2) Put viewport meta tag in the head of the document.
“width=device-width” indicates the screen’s width in device independent pixels. “initial-scale=1.0” to indicates one to one relationship between CSS and device independent pixels.
3) Convert the HTML Table structure into separate sections as follow.
.searchbox and .results are put into .container2 so that they could be moved around together when the screen size becomes bigger.
4) Design smallest view first and use media query for different break points.
5) Slide in the results on the screen when the user clicked the search button.
Edit the displayData( ) function as above to slide in the divResults into the view.
6) Slide back and hide the results list when the user clicked on one of the result, and then show the clicked location on the map.
Add the following code to ZoomTo( ) function to hide the list.
7) Add media query and styles for break point with minimum width 800px.
In a wider screen, container2, which contains search input box and result list, and map area are placed side by side. Result list is put back on screen by setting transform to 0,0.
8) Add media query and styles for break point with minimum width 1000px.
After minimum width 1000px is reached, the contents will stop growing, and left and right margins will be added automatically.
That is! We have a responsive page using OneMap as base-map. This is just a very simple rework on the existing code and by no means a complete work. But you get the basic idea of how to make your page responsive if you are using onemap api in it.