Ungewollter Platz unter der Google Map

[Fugel]

Hallo Leute,

mir ist gerade aufgefallen das ich unter meiner eingebetteten Google Maps Karte einen kleinen abstand zum Ende der Seite habe, dieser ist natürlich nicht gewollt.



Ich habe allerdings keinen Abstand in meinem CSS Code, und mir ist auch aufgefallen, das es bei allen Projekten der Fall ist.

Hat einer eine Idee woran das liegen kann?

 

[Myhar]

Anhand eines Bildes kann man da nur sagen: Das liegt an deinem CSS.

Mehr kann man sagen, wenn man einen Link zu der Seite hat.

 

[Fugel]

Dann hier mal der betreffende Code aus meiner SCSS:

background-color: $light;
    min-height: 300px;
  
    .container {
        height: 100%;
    }
  
    .impressum {
        padding-top: 50px;
    }

Und hier der HTML Teil:

<section id="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-sm-7">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4106.211805184709!2d13.743265662385511!3d51.061691698704585!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0xcc3676e2c6a89765!2sAm+Thor!5e0!3m2!1sde!2sde!4v1446624818981" frameborder="0" style="border:0; width: 100%; height: 300px;" allowfullscreen></iframe>
            </div>
            <div class="col-md-3 col-sm-5 impressum">
                <p>Reservierugen unter</p>
                <h2>XXXXXXXX</h2>
                <p>XXXXXXX<br />
                    XXXXXXXX<br />
                    Inhaber: XXXXXXXXX<br />
                </p>
                <p>Öffnungszeiten täglich ab 11 Uhr</p>
            </div>
        </div>
    </div>
</section>

Ich hoffe das reicht, die Seite ist leider noch nicht online.

 

[hub]

Moin,
nö, reicht nicht. Aber du kannst es mit den Developer-Tools diverser Browser schnell selbst herausfinden ...

Gruß Ulli

 

[Fugel]

Moin,
nö, reicht nicht. Aber du kannst es mit den Developer-Tools diverser Browser schnell selbst herausfinden ...

Gruß Ulli

Das hab ich natürlich schon versucht, kann mir es aber dennoch nicht erklären.

 

[Myhar]

Ohne dass du uns Infos gibt können wir dir leider nicht helfen So bleibt wirklich nur der Hinweis auf die Developer-Tools. Damit siehst du, welches Element wie viel Platz verbraucht. Lösche mal testweise Elemente oder füge welche hinzu, wenn du dir mit CSS schwer tust.

 

[SimoneHinz]

Gebe doch einen Zeilenabstand von -X ein, bei X musst Du testen in wieweit Du ins Minus X gehst bis es passt. Ich hoffe Du verstehst was ich meine.

 

[Ilse_Schnick]

...änder einfach mal deinen iframecode

            <div class="col-md-9 col-sm-7"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4106.211805184709!2d13.743265662385511!3d51.061691698704585!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0xcc3676e2c6a89765!2sAm+Thor!5e0!3m2!1sde!2sde!4v1446624818981" frameborder="0" style="border:0; width: 100%; height: 300px; padding:0; margin:0;" allowfullscreen></iframe></div>

und im CSS wenn nicht schon da:

html,body {
margin:0;
padding:0;
}

 

[Jormungand]

Sicher, dass alle betroffenen margins und paddings nach unten auf 0 stehen?
Falls ja, kannst du dann schummeln und deinem Container mit der Map einen negativen margin-bottom geben, damit er hoch rückt.