Making two divs with their own scrolling/interactivity sit on top of one another on mobile-CodePudding

I've been working back and forth with this code for a while and I can't seem to get the sidebar and map class to sit one on top of the other (like responsive bootstarap style) on mobile. I don't want to use bootstrap, but I have it exactly as I want it on desktop, I'm just trying to make the sidebar and map sit full-width but only a portion of the height for mobile. The sidebar is a scrolling box of listings while the map class just holds a JS map widget but I just want them to sit on top of each other on mobile

What am I doing wrong?

<style>

      body {
        color: #404040;
        font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', sans-serif;
        margin: 0;
        padding: 0;
        height:100%;
        -webkit-font-smoothing: antialiased;
      }

      * {
        box-sizing: border-box;
      }

      @media (max-width: 767px) {
      
      .map_wrapper {
          flex-direction: column-reverse;
        }
        .sidebar,
        .map {
          width: auto;
        }
      }

      .map_wrapper{
        display: flex;
      }

      .sidebar {
        position: absolute;
        width: 15%;
        height: 100%;
        top: 20%;
        left: 0;
        overflow: hidden;
        border-right: 1px solid rgba(0, 0, 0, 0.25);
      }

      .map {
        position: absolute;
        left: 20%;
        width: 70%;
        height: 100%;
        top: 20%;
        bottom: 0;
      }

      h1 {
        font-size: 22px;
        margin: 0;
        font-weight: 400;
        line-height: 20px;
        padding: 20px 2px;
      }

      a {
        color: #404040;
        text-decoration: none;
      }

      a:hover {
        color: #101010;
      }

      .heading {
        background: #fff;
        border-bottom: 1px solid #eee;
        min-height: 60px;
        line-height: 60px;
        padding: 0 10px;
        background-color: #88B942;
        color: #fff;
      }

      .listings {
        height: 100%;
        overflow: auto;
        padding-bottom: 60px;
      }

      .listings .item {
        display: block;
        border-bottom: 1px solid #eee;
        padding: 10px;
        text-decoration: none;
      }

      .listings .item:last-child {
        border-bottom: none;
      }
      .listings .item .title {
        display: block;
        color: #88B942;
        font-weight: 700;
      }

      .listings .item .title small {
        font-weight: 400;
      }
      .listings .item.active .title,
      .listings .item .title:hover {
        color: #8cc63f;
      }
      .listings .item.active {
        background-color: #f8f8f8;
      }
      ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
        border-left: 0;
        background: rgba(0, 0, 0, 0.1);
      }
      ::-webkit-scrollbar-track {
        background: none;
      }
      ::-webkit-scrollbar-thumb {
        background: #88B942;
        border-radius: 0;
      }

      .marker {
        border: none;
        cursor: pointer;
        height: 56px;
        width: 56px;
        background-image: url(https://cannabis.page/images/WEED_MARKER_final.png);
      }

      /* Marker tweaks */
      .mapboxgl-popup {
        padding-bottom: 50px;
      }

      .mapboxgl-popup-close-button {
        display: none;
      }
      .mapboxgl-popup-content {
        font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', sans-serif;
        padding: 0;
        width: 180px;
      }
      .mapboxgl-popup-content h3 {
        background: #91c949;
        color: #fff;
        margin: 0;
        padding: 10px;
        border-radius: 3px 3px 0 0;
        font-weight: 700;
        margin-top: -15px;
      }

      .mapboxgl-popup-content h4 {
        margin: 0;
        padding: 10px;
        font-weight: 400;
      }

      .mapboxgl-popup-content div {
        padding: 10px;
      }

      .mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
        margin-top: 15px;
      }

      .mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
        border-bottom-color: #91c949;
      }

      .round {
        display: inline-block !important;
        margin: 0 auto;
          width: 90%;
          border-radius: 15px;
          border: 1px #000 solid;
          padding: 5px 5px 5px 25px;
          top: 0;
          left: 0;
          z-index: 5;
          margin-left:auto;
          margin-right:auto;
          width: 30%;
      }

      input[type="submit"] {
        display: inline-block;
          margin-left: -63px;
          height: 34px;
          background: blue;
          color: white;
          border: 0;
          background-color: #88B942;
          -webkit-appearance: none;
      }
    
</style>
      <div class="box" style="text-align:center;">
        <input id="zipSearch" type="text" name="search" class="round" onclick="getLocation()" placeholder="Enter Zip Code" />
        <input type="submit" name="" onclick="getByManualZip()">
      </div>

     


      <div class="map_wrapper" style="border: 1px solid red;width:70% !important; display: flex; margin: 0 auto !important;">
        <div class="sidebar">
          <div class="heading">
            <h1>Our locations</h1>
          </div>
          <div id="listings" class="listings">
          </div>
        </div>
        <div id="map" class="map" style="border:1px solid black">
        Placeholder for map
        </div>
      </div>

CodePudding user response：

NOTE: I assume by 'on top of' you mean 'above' as opposed to literally having both index layered with a z-index.

For this, the first thing you'll want to do is swap your position from absolute to relative. Then it's really just a matter of setting width: 100% and getting rid of the left, right, top and bottom values, which you can overwrite with auto.

There's some additional styling that can be done, like adding a margin to the elements. Note that in your example above, the .map_wrapper has an !important declaration inline. These should be avoided, as they add the highest possible level of specificity. I've moved these inline styles to the CSS panel to allow my styles to override them.

See NEW in the styles below:

body {
  color: #404040;
  font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .map_wrapper {
    flex-direction: column-reverse;
  }
  .sidebar,
  .map {
    width: auto;
  }
}

.map_wrapper {
  display: flex;
}

.sidebar {
  position: absolute;
  width: 15%;
  height: 100%;
  top: 20%;
  left: 0;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
}

.map {
  position: absolute;
  left: 20%;
  width: 70%;
  height: 100%;
  top: 20%;
  bottom: 0;
}

h1 {
  font-size: 22px;
  margin: 0;
  font-weight: 400;
  line-height: 20px;
  padding: 20px 2px;
}

a {
  color: #404040;
  text-decoration: none;
}

a:hover {
  color: #101010;
}

.heading {
  background: #fff;
  border-bottom: 1px solid #eee;
  min-height: 60px;
  line-height: 60px;
  padding: 0 10px;
  background-color: #88B942;
  color: #fff;
}

.listings {
  height: 100%;
  overflow: auto;
  padding-bottom: 60px;
}

.listings .item {
  display: block;
  border-bottom: 1px solid #eee;
  padding: 10px;
  text-decoration: none;
}

.listings .item:last-child {
  border-bottom: none;
}

.listings .item .title {
  display: block;
  color: #88B942;
  font-weight: 700;
}

.listings .item .title small {
  font-weight: 400;
}

.listings .item.active .title,
.listings .item .title:hover {
  color: #8cc63f;
}

.listings .item.active {
  background-color: #f8f8f8;
}

 ::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  border-left: 0;
  background: rgba(0, 0, 0, 0.1);
}

 ::-webkit-scrollbar-track {
  background: none;
}

 ::-webkit-scrollbar-thumb {
  background: #88B942;
  border-radius: 0;
}

.marker {
  border: none;
  cursor: pointer;
  height: 56px;
  width: 56px;
  background-image: url(https://cannabis.page/images/WEED_MARKER_final.png);
}


/* Marker tweaks */

.mapboxgl-popup {
  padding-bottom: 50px;
}

.mapboxgl-popup-close-button {
  display: none;
}

.mapboxgl-popup-content {
  font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', sans-serif;
  padding: 0;
  width: 180px;
}

.mapboxgl-popup-content h3 {
  background: #91c949;
  color: #fff;
  margin: 0;
  padding: 10px;
  border-radius: 3px 3px 0 0;
  font-weight: 700;
  margin-top: -15px;
}

.mapboxgl-popup-content h4 {
  margin: 0;
  padding: 10px;
  font-weight: 400;
}

.mapboxgl-popup-content div {
  padding: 10px;
}

.mapboxgl-popup-anchor-top>.mapboxgl-popup-content {
  margin-top: 15px;
}

.mapboxgl-popup-anchor-top>.mapboxgl-popup-tip {
  border-bottom-color: #91c949;
}

.round {
  display: inline-block !important;
  margin: 0 auto;
  width: 90%;
  border-radius: 15px;
  border: 1px #000 solid;
  padding: 5px 5px 5px 25px;
  top: 0;
  left: 0;
  z-index: 5;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

input[type="submit"] {
  display: inline-block;
  margin-left: -63px;
  height: 34px;
  background: blue;
  color: white;
  border: 0;
  background-color: #88B942;
  -webkit-appearance: none;
}


/* NEW */

.map_wrapper {
  border: 1px solid red;
  width: 70%;
  display: flex;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .map_wrapper {
    margin: 20px auto;
    flex-direction: column;
  }
  .sidebar,
  .map {
    position: relative;
    width: 100%;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    height: auto;
  }
  .listings {
    padding-bottom: 0;
  }
}

<div class="box" style="text-align:center;">
  <input id="zipSearch" type="text" name="search" class="round" onclick="getLocation()" placeholder="Enter Zip Code" />
  <input type="submit" name="" onclick="getByManualZip()">
</div>

<div class="map_wrapper">
  <div class="sidebar">
    <div class="heading">
      <h1>Our locations</h1>
    </div>
    <div id="listings" class="listings">
    </div>
  </div>
  <div id="map" class="map" style="border:1px solid black">
    Placeholder for map
  </div>
</div>