I have a leaflet map in a div. However, on mobile the map is not showing. I've tried using flex but it doesn't work.
Any idea how to solve this ?
var map = L.map('map').setView([45.505, -73.19], 9); // Set initial coordinates and zoom level L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);* { box-sizing: border-box; } /* For mobile phones: */ [class*="col-"] { width: 100%; display: flex; align-items: center; flex-direction: column; }#table-container { height:350px; overflow:auto; margin-top:20px; margin-bottom: 20px;}h5, h4, h2{ font-weight: bolder; text-align: center; }/* Proposed solution by @jla */.map { /* position: absolute */ width: 100%; flex-basis: 200px;}.table-header{ font-size: x-small; text-align: center;}p{ color: gray; font-size: small; text-align: center;}.data-rental{ text-align: center; font-size: 60px;}.logo { width: 200px; height: 49px;}@media only screen and (min-width: 1800px) { html, body { min-height: 100vh; width: 100%; overflow: auto; } .main-data{ text-align: center; } * { box-sizing: border-box; font-family: 'Lucida Sans'; } .row::after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; } h5, h4, h2{ font-weight: bolder; text-align: left; } /* For desktop: */ .col-1 {width: 10%; align-items:normal;} .col-2 {width: 16.66%; align-items:normal;} .col-3 {width: 25%; align-items:normal;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 65%; display: block;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%; align-items:normal;} .column { text-align:center; background-color: white; /* Change the background color as needed */ color: black; /* Change the text color as needed */ float: left; padding-top: 20px; vertical-align: center; } .table-header{ font-size: x-small; text-align: center; } .table-container { height:300px; overflow:auto; margin-top:20px; margin-bottom: 20px; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .logo { width: 200px; height: 49px; } .left-sidebar { position: absolute; padding: 10px; bottom: 0; left:0; background-color: white; /* Change the background color as needed */ color: black; /* Change the text color as needed */ height: calc(100vh - 200px); } .right-sidebar { position: absolute; display:block; right: 0; background-color: white; /* Change the background color as needed */ color: black; /* Change the text color as needed */ height: calc(100vh - 160px); overflow-y: scroll; } .div-selectors{ padding-bottom: 5px; float: left; } .selectors{ width:100%; float: left; } .data-rental{ text-align: right; font-size: 60px; float: right; /* add this */ } #wrapper { overflow: hidden; /* add this to contain floated children */ padding: 10px; } #data-desc { width: 66%; text-align: justify; float:left; /* add this */ } .data-container{ padding: 20px; } #data-header{ padding-top: 5px; padding-bottom: 5px; } p{ color: gray; font-size: small; text-align: left; } .map { flex: 1; height: calc(100vh - 260px); margin-bottom: -15px; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Your Website Title</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"><link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.css"><link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" /><link rel="stylesheet" href="leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.css"><link rel="stylesheet" href="leaflet/dist/MarkerCluster.css"><link rel="stylesheet" href="leaflet/dist/MarkerCluster.Default.css"><link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'><script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script><script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script><script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.min.js"></script><script src="leaflet/dist/leaflet.markercluster-src.js"></script><script src="leaflet/dist/leaflet.markercluster.js"></script><link rel="stylesheet" href="css/mobile-app.css"><link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script></head><body><div class="col-12"><header><div><h5 style="font-weight: bold;">Title</h5></div></header></div><div class="col-1"><div class="left-sidebar col-1"><div><h5>Filter</h5></div><div class="div-selectors"><h5>Region</h5><form action="" method="POST" enctype="multipart/form-data"><select id="reg" class="selectors" type="hidden" style="width:150px"><option></option></select></form></div><div class="div-selectors"><h5>Metro</h5><form action="" method="POST" enctype="multipart/form-data"><select id="rmr" class="selectors" type="hidden" style="width:150px"><option></option></select></form></div><div class="div-selectors"><h5>City</h5><form action="" method="POST" enctype="multipart/form-data"><select id="muni" class="selectors" type="hidden" style="width:150px"><option></option></select></form></div></div></div><div class="col-8 main-container"><div class="container-fluid main-data"><div class="col-3 column"><h3 id="tot">·</h3><h5 class="main-data">1</h5></div><div class="col-3 column"><h3 id="str">·</h3><h5 class="main-data">2</h5></div><div class="col-3 column"><h3 id="ltr">·</h3><h5 class="main-data">3</h5></div><div class="col-3 column"><h3 id="pcltr">·</h3><h5 class="main-data">4</h5></div></div><div class="map" id="map"></div></div><div class="col-3"><div class="right-sidebar col-3"><!-- Right sidebar content goes here --><div id="data-header"><h5>More infos</h5><h2 id="geo-viz"></h2></div><div></div><h5>Table</h5><div class="table-container"><table class="table"><thead><tr><th scope="column" class="table-header">1</th><th scope="column" class="table-header">2</th><th scope="column" class="table-header">3</th><th scope="column" class="table-header">4</th></tr></thead><tbody id="data-table"></tbody></table></div><div id="data-header"><h5>Data title 1</h5><div id="wrapper"><div id="data-desc"><p></p></div><div class="data-rental"></div></div></div><div id="data-header"><h5>Data title 2</h5><div id="wrapper"><div id="data-desc"><p></p></div><div class="data-rental"></div></div></div></div></div>