CODEWITHSUNDEEP
javascripthtmlcssgoogle-mapsoverflow
Amanda Harvey
Amanda Harvey

Reputation: 549

Google maps causing other elements to overflow the body

I have both <body> and <html> set to fill the full height and width of the view-- and they do. The problem is, now that I have a Google maps element essentially serving as a page background, other elements are overflowing the view size and being pushed offscreen.

Image of app screen

This is how it looks currently. I've tried adjusting the size of the <html> and <body> elements, but that's not really a fix so much as a hack, as it throws off the layout in other ways. I've also tried playing around with overflow options.

enter image description here

This is how it looks when you inspect it, showing the overflow, and the fact that the body is the correct size. (You have to zoom out to see the overflow.) Notice that both the right side and the bottom, above the fixed navbar, show a gap between the edge of the map element and the limits of the screen.

I'm assuming the problem is something with my map element's CSS, but I cannot for the life of me figure out what it is. Here's the map-specific CSS:

#map {
            position: absolute;
            top: 50px;
            left: 80px;
            height: calc(100vh - 50px);
            width: calc(100vw - 80px);
            z-index: 0;
            overflow: hidden;
          }

          @media (max-width: 768px) {
            #map {
                top: 0;
                left: 0;
                height: calc(100vh - 55px);
                width: 100vw;
            }
          }

And here's a link to a codepen containing the page with the issue: https://codepen.io/redheadedmandy/pen/BVRxZE

Any suggestions for a workable fix would be really helpful!

Upvotes: 1

Views: 679

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29249

The problem is with with the div with the classes bottom content-container, just after the #map div.

The problem is that in one hand, it has width: 100% (by .bottom rule) and in the other hand, it has 

@media (max-width: 768px) {
  .content-container.bottom {
    margin-left: 20px;
    margin-right: 20px;
  }
}

which "push" the whole document so the total width will be 100% + 20px.

The solution is to reduce the size by set margin: 0 or override the width: 100%.

Here is a the first solution:

http://output.jsbin.com/meziduy/4

Let me know if something is not clear.

Upvotes: 1

Related Questions