[Joomla/CSS] Google maps embed positionering

[Vae Victus]

Op een website die ik voor een vriend in elkaar aan het zetten ben, heb ik een Google Maps embed naar zijn adres erin gezet. Dit werkt verder prima. Maar om het voor de mobiele gebruikers ook leesbaar te maken wilde ik dit responsive maken. Dat heb ik gedaan met behulp van de volgende CSS code:

code:

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 40% !important;
    }
</style>

Nu is er echter een behoorlijk stuk lege pagina tot aan het volgende element. Dit wil ik natuurlijk weg hebben zodat het een en ander netjes op elkaar aansluit.

Met het wijzigen van de relative position en daar de bottom parameter toe te voegen wilde ik dit naar 0 brengen, echter dat werkt niet.
Als ik het hele responsive CSS deel eruit haal sluit wel alles prima op elkaar aan. Echter heeft de embed map dan een vaste afmeting wat niet handig is voor mobiele gebruikers.
link verwijderd

Kan iemand mij simpel uitleggen hoe ik dit moet doen?

[ Voor 2% gewijzigd door Creepy op 02-04-2020 13:44 . Reden: Lin verwijderd. ]

[Postman]

Ik zou eens kijken naar vaste afmetingen (em bijvoorbeeld) en geen gebruik maken van 75% voor je bottom.

[Vae Victus]

Ik zie geen verschil in afstand naar het volgende element als ik de code wijzig van padding-bottom: 75%; naar padding-bottom: 50em;
Zit het probleem dan ergens anders in of verwerk ik het verkeerd?

[Room42]

Je link is verwijdert omdat dat als spam gezien kan worden maar nu mist alle relevante code. Kun je het reproduceren op, bijvoorbeeld, https://jsfiddle.net/ en dan de relevante code hier plaatsen?

[Vae Victus]

Het is lastig om de complete code van de pagina weer te geven omdat ik dit heb gedaan via Joomla. In Joomla heb ik een nieuwe module gemaakt en deze vervolgens de positie gegeven boven de contact pagina.
Als ik dat doe met de volgende code werkt het prima:

code:

<iframe src="google embed link" width="800" height="350" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Alleen het punt hier is dat de afmetingen een vaste waarde hebben, vandaar dat ik dit met behulp van CSS responsive wilde maken. Daar heb ik dan de volgende code voor gebruikt:

code:

<style>
    .google-maps {
        position: relative;
    padding-bottom: 75%;
        height: 0;        
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 40% !important;
    }
</style>

<div class="google-maps">
<iframe src="google embed link" frameborder="0" style="border:0;" allowfullscreen="no" aria-hidden="false" tabindex="0"></iframe>
</div>

https://jsfiddle.net/8xgf5nrv/
Hier nog een screenshot als ik het element inspecteer in FF. Het adres in de google maps embed link heb ik onleesbaar gemaakt.


Alvast bedankt!

[Jivebunny]

De fiddle hebben we nog niet heel veel aan want het is gewoon precies wat je hier al twee maal plaatst als 'code'.

Ik denk dat je vooral even moet verdiepen in media-queries binnen CSS. Daarbij kan je namelijk aangeven dat als een device, zoals een smartphone, bijvoorbeeld maximaal 700 pixels breed heeft als resolutie, je andere css regels toepast. Dan kan je voor een desktop een aparte media query schrijven bij max breedte > 700 pixels.

Dat is zo'n beetje de basis voor responsive web design. Het lijkt er zo op, op basis van je informatie die je geeft, dat daar geen rekening mee wordt gehouden door jou in je <style> sectie

Hier kan je wat meer erover lezen: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Ik kan er wel even naar kijken, stuur mij even de link in DM anders.

[ Voor 4% gewijzigd door Jivebunny op 08-04-2020 14:17 ]