0

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:

enter image description here

Ad this is how it looks on mobile screens:

enter image description here

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.

Improve this question

2 Answers 2

Reset to default
1

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 container flex and make sure it has height by giving itself a aspect-ratio (or you can directly give exact height).

Try something like this.

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
/* index_page.css */

.content-wrapper-inner{
  display: flex;
}
/* Ensure the map takes up full height of its container */
#map {
  width: 100%;
  height: 100%; /* Add this line to ensure the map fills its container's height */
}
.sidebar-content {
  flex: 1;
}
.main-content {
  flex: 3;
  aspect-ratio: 1;
}

/* 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 {
    aspect-ratio: auto;
  }

  #map {
    height: 300px; /* Set a fixed height for the map on smaller screens */
  }
}
<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
        </div>
      </div>
      <div class="sidebar-content">
        sidebar
      </div>
    </div>
  </div>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

Improve this answer
1

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:

#map {
  flex: 1;
  width: 100%;
  height: 100%; 
}

@media (max-width: 768px) {
  .content-wrapper-inner {
    flex-direction: column;
  }

  .main-content {
    width: 100%;
  }

  #map {
    flex: 1;
    height: 300px; 
  }

  .sidebar-content {
    width: 100%;
  }
}

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.