webfarben/Gutti
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Map-Darstellung optimiert: Position im Grid angepasst, Größe 470x470px, mobile Ansicht verbessert

Browse Source
This commit is contained in:
webfarben
2026-02-11 11:47:40 +01:00
parent 01b0589fb8
commit 740c667390
2 changed files with 43 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@@ -170,19 +170,19 @@
</div>
</div>
<div class="contact-cta">
<h3>Vereinbaren Sie einen Termin</h3>
<p>Gerne berate ich Sie persönlich zu Ihren Versicherungsfragen. Kontaktieren Sie mich für ein unverbindliches Gespräch.</p>
<div class="contact-buttons">
<a href="mailto:andreas.guttenberger@axa.de" class="btn btn-primary">E-Mail schreiben</a>
<a href="tel:+4915174483560" class="btn btn-secondary">Anrufen</a>
</div>
<!-- Map Section -->
<div class="map-container">
<div id="map"></div>
</div>
</div>
<!-- Map Section -->
<div class="map-container">
<div id="map"></div>
<div class="contact-cta">
<h3>Vereinbaren Sie einen Termin</h3>
<p>Gerne berate ich Sie persönlich zu Ihren Versicherungsfragen. Kontaktieren Sie mich für ein unverbindliches Gespräch.</p>
<div class="contact-buttons">
<a href="mailto:andreas.guttenberger@axa.de" class="btn btn-primary">E-Mail schreiben</a>
<a href="tel:+4915174483560" class="btn btn-secondary">Anrufen</a>
</div>
</div>
</div>
</section>

39
style.css
View File

@@ -390,6 +390,8 @@ body {
padding: 40px;
border-radius: 15px;
text-align: center;
max-width: 1000px;
margin: 60px auto 0;
}
.contact-cta h3 {
@@ -439,18 +441,19 @@ body {
/* Map */
.map-container {
margin-top: 60px;
border-radius: 0;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-lg);
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
width: 470px;
max-width: 100%;
height: 470px;
margin-left: auto;
margin-right: auto;
}
#map {
width: 100%;
height: 450px;
height: 100%;
}
/* Back to Top Button */
@@ -582,6 +585,14 @@ body {
grid-template-columns: 1fr;
gap: 40px;
}
.map-container {
width: 100%;
max-width: 470px;
height: 400px;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 768px) {
@@ -621,6 +632,14 @@ body {
.about-content {
grid-template-columns: 1fr;
}
.map-container {
width: 100%;
max-width: 100%;
height: 350px;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 480px) {
@@ -641,4 +660,12 @@ body {
.portrait {
max-width: 300px;
}
.map-container {
width: 100%;
max-width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
}