Gelöst: Flip Card nicht responsiv

[thobrand]

Hallo zusammen,

ich bin neu hier und stelle mich daher ganz kurz vor. Mein Name ist Thomas Brand und ich beschäftige mich erst seit kurzem mit den Themen Html und CSS. Ich besitze daher aktuell nur Grundkenntnisse, so kommt auch meine aktuelle Frage zustande:

Ich habe mit beigefügtem Code eine Flip-Card gebastelt mit welcher ich soweit eigentlich ganz zufrieden bin. Was ich noch suche:
- Wie kann ich die Größe der Karte ändern, irgendwie bringt Änderung der Werte "width" und "hight" keine Änderung.
Hinweis: die Karte ist als Code-Feld im Rahmen eines Web-Baukastens realisiert
- Beim ändern der Bildschirmgröße passen sich die Karten an sich in der Breit an den Bildschirm an. Das ist OK. Ich schaffe es aber trotz Einsatz relativer Werte bei Schrift und Bild (rem/em/%...) nicht, dass sich auch Schrift und Bild an die Bildschirmbreite anpassen.

Es wäre super wenn jemand einen Tipp für mich hätte, an alle die sich mit meiner Frage beschäftigen schonmal vorab ein ganz herzliches Danke. Nachfolgend der Code:


<meta name="viewport" content="width=device-width ,initial-scale=1">
<style>


body {
font-family: Arial, Helvetica, sans-serif;

body {font-size: 100%;}
h1 { font-size: 2.5rem; } /* 40/16 = 2.5 */
h2 { font-size: 2rem; } /* 32/16 = 2 */
h3 { font-size: 1.5rem; } /* 24/16 = 1.5 */
p { font-size: 0.7rem; } /* 16/16 = 1.0 */
}

.flip-card {
backgro1nd-color: #FFFFFF;
width: 100%;
height: auto%;
max-width: 100%;
perspective: 1000px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: auto;
max-width: 100%;


text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(8,29,143,0.7);
border-radius: 1rem;

}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: relative;
width: 100%;
height: auto;
max-width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-card-front {
background-color: #FFFFFF;
border-radius: 1rem;
}

.flip-card-back {
background-color: #081d8f;
color: #FFFFFF;
transform: rotateY(180deg);
border-radius: 1rem;
}



</style>



<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h3 style="font-weight: bold; margin-top: 10%;">Distanz</h3>
<img src="https://llij-n9b1-mhug.worldsoft-ws...blau.15.6068cf8ee5ed7.png?_1068678.1199998222" " alt="Distanz" style="width:5em;height:5em;">
</div>
<div class="flip-card-back">
<h3 style="color: white;font-weight: bold;margin-top: 10%;">Distanz</h3>
<p style="font-size: 0.7em; color: white; text-align: center; margin-left: 5%; margin-right: 5%;">Sie können den Kontakt online nicht so halten wie im Klassenraum, da Blickkontakt mittels Kamera nicht immer vorhanden ist.</p>

</div>;
</div>
</div>

 

[AndreasB]

Bitte poste das nächste Mal den Code in das richtige Snippet:


Zu deiner Frage:
Du möchtest, dass sich das Bild und die Schrift an Die Bildschirmbreite anpasst?

Für das Bild ist es sehr einfach, benutze einfach width: 100%;. (Oder einen anderen Prozentualen Wert.)
rem und em orientieren sich an der Schriftgräße und sind daher nicht dazu geeignet, etwas an die Bildschirmbreite anzupassen.

Bei dem Text ist das etwas anderes. Man kann in CSS nicht so leicht, die Briete eines Textes bestimmen und hoffen, dass sich die Schriftgroße daran anpasst.
Meinstens ist das auch nicht gewollt, da zu große Schriftgrößen die Lesbarkeit reduzieren.
Was möchtest du denn erreichen?
Wenn es nur um eine Größenänderung geht, könntest du zB mit vw Werten arbeiten. Dann wird sich allerdings unter Umständen das Bild in Anderem Maße als der Text verändern.
Wie ist denn die Karte auf der Webseite integriert? Wenn es nur eine, in der Mitte ist, ist das kein Problem.

 

[thobrand]

Vielen Dank für die schnelle und perfekte Rückmeldung. Damit ist genau das erreicht was ich gesucht habe. Bild mit % und Text mit vw werden auf die Bildschirmbreite angepasst. Das habe ich gesucht, es werden 5 Flip-Cards nebeneinander angezeigt welche beim kleineren Bildschirmen schmaler werden. Wenn das Verhältnis der Größenanpassungen abweicht ist das nicht schlimm.

Meine Anfrage ist damit gelöst, Danke auch für den Hinweis mit dem Snippel. Das wusste ich nicht, achte beim nächsten mal darauf.

Nochmals Danke und einen schönen Abend
Thomas