title: How to make the Google maps API floating panels responsive?
body: <p>An image of the map on a mobile:
  <a href="https://i.stack.imgur.com/XFPo8.png" rel="nofollow noreferrer">Map</a></p>
  
  <p>I have tried the following Css and HTML but I couldn't make the floating panels show when the map is used on a mobile. Is there anything I can change in the CSS or html to make the floating panels responsive please ?
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#origin-input,
  #destination-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;
      &lt;input id="origin-input" class="controls" type="text"
          placeholder="Enter an origin location"&gt;
  
      &lt;input id="destination-input" class="controls" type="text"
          placeholder="Enter a destination location"&gt;
  
      &lt;div id="mode-selector" class="controls"&gt;
        &lt;input type="radio" name="type" id="changemode-walking" checked="checked"&gt;
        &lt;label for="changemode-walking"&gt;Walking&lt;/label&gt;
  
        &lt;input type="radio" name="type" id="changemode-transit"&gt;
        &lt;label for="changemode-transit"&gt;Transit&lt;/label&gt;
  
        &lt;input type="radio" name="type" id="changemode-driving"&gt;
        &lt;label for="changemode-driving"&gt;Driving&lt;/label&gt;
      &lt;/div&gt;
       &lt;/div&gt;
  
      &lt;div id="right-panel"&gt;&lt;/div&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;div id="map"&gt;&lt;/div&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>