I’m facing an issue with my HTML/CSS layout where the map element (#map
) is not displayed on smaller screens, while the map settings (map-settings
) are visible. Here’s 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%;
}
}
I’ve noticed that when the screen width is reduced, the map disappears while the map settings remain visible. I’ve tried adjusting the CSS properties and media queries, but I can’t seem to get the map to display properly on smaller screens.
This is how it looks on PC screens:
Ad this is how it looks on mobile screens:
You can see that on mobile screens, only the map settings are shown. The actual map is missing.
I tried playing with the overflow
property, but I didn’t managed to make it as it should be.
Also, the map is from leaflet
, if this will help you.
Could someone please help me understand why the map is not showing on smaller screens and how I can fix this issue? Any insights or suggestions would be greatly appreciated. Thank you!
I will provide more information upon request.
2
Answers
The primary issue is that the #map element does not have an explicit height set for smaller screens, causing it to collapse and not display properly.
Here’s the updated CSS that ensures the #map element has an explicit height on smaller screens:
The #map element did not have an explicit height set for smaller screens, causing it to disappear when the screen size was reduced. By adding a fixed height (height: 300px;) for the #map in the media query for screens with a maximum width of 768px, the map is now ensured to have a visible height on smaller screens.
Hope this helps.
I don’t know if you provided missing code or not but when I copy your code into a sandbox, it actually works on mobile but not on desktop (quite opposite to your problem).
This because, you make the map to fill its container but container of the map (
.main-content
) does not have a height. So, on desktop it does not displaying properly, but on mobile, it is displaying perfectly just because you set its height to 300px. To ensure.main-content
has a height, we can make its containerflex
and make sure it has height by giving itself aaspect-ratio
(or you can directly give exact height).Try something like this.