Hi.
Ich habe drei Flipcards nebeneinander, die ich gern responsiv machen würde, also so dass sie sich der Bildschirmgröße anpassen. Momentan werden sie seitlich abgschnitten, wenn der Bildschirm zu klein ist. Schon alles mögliche probiert, ich kriegs einfach nicht hin. Hat jemand eine Idee?
So sieht es aus (ich habe jetzt einfach mal 3 random Bilder eingefügt).
Ich habe drei Flipcards nebeneinander, die ich gern responsiv machen würde, also so dass sie sich der Bildschirmgröße anpassen. Momentan werden sie seitlich abgschnitten, wenn der Bildschirm zu klein ist. Schon alles mögliche probiert, ich kriegs einfach nicht hin. Hat jemand eine Idee?
So sieht es aus (ich habe jetzt einfach mal 3 random Bilder eingefügt).
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.flex-container {
display: flex;
flex-direction: row;
}
body {
font-family: Verdana;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #fff;
color: #E94A6C;
text-align: center;
font-size: 25px;
line-height: 1.5;
}
.flip-card-back {
background-color: #fff;
color: #455072;
font-size: 28px;
text-align: center;
line-height: 1.4;
transform: rotateY(180deg);
}
.flex-container > div {
background-color: #f1f1f1;
margin: 0px;
padding: 1px;
font-size: 30px;
</style>
</head>
<body>
<div class="flex-container">
<div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://tse3.mm.bing.net/th?id=OIP.tmzm5Y6M6xVCx36Tvpbf-wHaEo&pid=Api" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<p style="margin-left:10%; margin-right:10%; margin-top: 20%">
<span>Text Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
</div>
</div>
</div>
<div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://tse2.mm.bing.net/th?id=OIP.N67TUS3mEVECWc40qIiM5gHaEo&pid=Api" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<p style="margin-left:10%; margin-right:10%; margin-top: 20%">
<p style="margin-left:10%; margin-right:10%; margin-top: 20%; font-family:"Wix Madefor Text"">
<span>Text Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
</div>
</div>
</div>
<div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://tse4.mm.bing.net/th?id=OIP.tNQP6ieegvnRiyNrLffpJgHaEK&pid=Api" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<p style="margin-left:10%; margin-right:10%; margin-top: 20%">
<span>Text Text Text Text Text Text Text Text Text Text Text Text</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>