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> </div>
<div class="contact-cta"> <!-- Map Section -->
<h3>Vereinbaren Sie einen Termin</h3> <div class="map-container">
<p>Gerne berate ich Sie persönlich zu Ihren Versicherungsfragen. Kontaktieren Sie mich für ein unverbindliches Gespräch.</p> <div id="map"></div>
<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>
</div> </div>
<!-- Map Section --> <div class="contact-cta">
<div class="map-container"> <h3>Vereinbaren Sie einen Termin</h3>
<div id="map"></div> <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>
</div> </div>
</section> </section>

39
style.css
View File

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