I need to toggle the visibility of the "tiled-map" div when viewing on mobile devices, while ensuring that all 3 divs (base-map, overlay-map, tiled-map) within the "map-wrapper" div are displayed on desktop view.
Currently, I am using Bootstrap CSS without any specific CSS class for the map-wrapper div. I initially set its width to 200%, but now I want to adjust it to 100% for mobile view, utilizing a custom CSS segment in Bootstrap. Although I acknowledge that my usage of the mobile-hide class for the tiled-map div may be redundant, as it was part of an experimental approach.
Here is a snippet of the code:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<div id="map-wrapper" class="mobile-hide" style="width: 200%; height: 600px; position: relative;">
<div id="base-map"></div>
<div id="overlay-map"></div>
<div id="tiled-map"></div>
</div>
</div>
</div>
</div>
CSS:
@media only screen and (max-width: 480px) {
#tiled-map {
visibility: hidden !important;;
display: none !important;
}
.mobile-hide {
width: 100%;
visibility: hidden !important;;
display: none !important;
}
}
How can I tackle this issue?
Updated (Resolved):
<div class="container">
<div class="row">
<div id="map-wrapper">
<div id="map1"></div>
<div id="map2"></div>
<input id="searchtxt" class="searchtxt" type="text" style="z-index:100; position: relative; top: 20px; left: 70px; border-radius: 5px; width: 250px; font-family: 'Archivo Narrow', Arial; font-weight: 400;"onkeyup="liveSuggest(this.value)" />
<div class="dropdown" id="searchResultList" style="z-index:10; position: absolute; top: 50px; left: 50px;font-family: 'Archivo Narrow', Arial; font-weight: 400; width: 300px"/>
</div>
<!-- Pager -->
<ul class="pager">
<li class="next">
</li>
</ul>
</div>
</div>
CSS:
<style>
head {
background-color: #473731;
}
body {
margin: 0;
background-color: #473731;
}
#map-wrapper {
width: 1140px;
height: 640px;
position: relative;
margin: 0 auto;
}
/* Additional media queries and styling rules here */