I'm encountering a problem with my HTML/CSS layout in which the map element (#map) is not appearing on smaller screens, while the map settings (map-settings) are visible. Below is a simplified version of my code:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags and title -->
</head>
<body>
<div class="content-wrapper">
<div class="content-wrapper-inner">
<div class="main-content">
<div id="map"></div>
<div class="map-settings" id="map-settings">
<!-- Map settings content -->
</div>
</div>
<div class="sidebar-content">
<!-- Sidebar content -->
</div>
</div>
</div>
</body>
</html>
CSS:
/* index_page.css */
/* Ensure the map takes up full height of its container */
#map {
flex: 1;
width: 100%;
height: 100%; /* Add this line to ensure the map fills its container's height */
}
/* Ensure the map settings remain visible on smaller screens */
.map-settings {
background: white;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
margin-bottom: 20px; /* Adjust margin to create space between map and settings */
z-index: 1000;
}
/* Ensure proper layout on smaller screens */
@media (max-width: 768px) {
.content-wrapper-inner {
flex-direction: column;
}
.main-content {
width: 100%;
}
#map {
flex: 1;
height: 300px; /* Set a fixed height for the map on smaller screens */
}
.sidebar-content {
width: 100%;
}
}
Upon resizing the screen width, I observed that the map disappears while the map settings remain visible. Despite trying to adjust CSS properties and media queries, the map still fails to display properly on smaller screens.
For desktop screens, it appears like this:
https://i.sstatic.net/kEfNcXgb.png
And for mobile screens, the display looks like this:
https://i.sstatic.net/wTGlq5Y8.png
Only the map settings are shown on mobile devices, with the actual map missing from view.
Have already tried adjusting the overflow property without success.
The map uses leaflet, in case that helps in finding a solution.
If anyone could shed light on why the map isn't showing on smaller screens and offer possible remedies, it would be greatly appreciated. Thank you!
Feel free to request further details if needed.