Implemented scrolling

This commit is contained in:
Kevin Veen-Birkenbach 2023-11-07 20:53:48 +01:00
parent 6d8efb474e
commit 1674138f88

View File

@ -29,9 +29,17 @@
display: flex;
flex: 1;
}
.card {
flex: 1; /* Stellt sicher, dass die Karten die ganze Höhe ihrer Container ausfüllen */
@media (min-width: 1200px) { /* Breite anpassen, ab wann Karten nebeneinander sein sollen */
.card-container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.card {
flex: 0 0 auto; /* Verhindert, dass Karten schrumpfen oder wachsen */
/* flex: 1; /* Stellt sicher, dass die Karten die ganze Höhe ihrer Container ausfüllen */
width: 18rem; /* Breite der Karten */
}
}
</style>
</header>
@ -43,7 +51,7 @@
<h2>Consulting and Coaching Services</h2>
<p></p>
</div>
<div class="row">
<div class="row card-container">
<div class="col equal-height">
<div class="card h-100 d-flex flex-column">
<div class="card-body d-flex flex-column">
@ -62,7 +70,6 @@
<li>Release Train Engineering</li>
<li>Team Building</li>
</ul>
<hr />
<a href="https://www.agile-coach.world" class="mt-auto btn btn-light stretched-link"><i class="fa-solid fa-globe"></i> www.agile-coach.world</a>
</div>
</div>
@ -85,7 +92,6 @@
<li>Career Guidance</li>
<li>Life Balance Strategies</li>
</ul>
<hr />
<a href="https://www.coachandconsult.world" class="mt-auto btn btn-light stretched-link"><i class="fa-solid fa-globe"></i> www.coachandconsult.world</a>
</div>
</div>
@ -108,7 +114,6 @@
<li>Commercial Endorsements</li>
<li>Personalized Coaching for Yachting Excellence</li>
</ul>
<hr />
<a href="https://www.yachtmaster.world" class="mt-auto btn btn-light stretched-link"><i class="fa-solid fa-globe"></i> www.yachtmaster.world</a>
</div>
</div>
@ -131,7 +136,6 @@
<li>Custom Expedition Planning</li>
<li>Maritime and Outdoor Preparedness</li>
</ul>
<hr />
<a href="https://www.expeditionadviser.world" class="mt-auto btn btn-light stretched-link"><i class="fa-solid fa-globe"></i> www.expeditionadviser.world</a>
</div>
</div>
@ -154,8 +158,6 @@
<li>Performance Monitoring and Optimization</li>
<li>Onsite and Remote IT Support</li>
</ul>
<hr />
<a href="https://www.mittelstand.world" class="mt-auto btn btn-light stretched-link"><i class="fa-solid fa-globe"></i> www.mittelstand.world</a>
</div>
</div>