Aktuelle Benutzeroberfläche:

Erforderliche Benutzeroberfläche:

Wie kann ich verhindern, dass sich ein Eingabeelement im rechten Abschnitt auf den gesamten rechten Abschnitt erstreckt? Ich denke, das Problem liegt an den Rasterspalten in meinem Formular für den rechten Abschnitt

Bitte schauen Sie sich den HTML- und CSS-Code an und sagen Sie mir, ich habe absolut keine Ahnung, wie ich das beheben kann.

/* Root Var */ :root { /* Primary Colors */ --active-input-color: linear-gradient(hsl(249, 99%, 64%), #hsl(278, 94%, 30%)); --error-color: hsl(0, 100%, 66%); /* Neutral Colors */ --white: hsl(0, 0%, 100%); --light-grayish-violet: hsl(270, 3%, 87%); --dark-grayish-violet: hsl(279, 6%, 55%); --very-dark-violet: hsl(278, 68%, 11%); /* Mobile Width */ --mobile-width: 375px; } /* Reset */ * { box-sizing: border-box; padding: 0; margin: 0; } body { font-size: 18px; font-family: 'Space Grotesk', sans-serif; /* Add bg image in CSS, here, inside body */ background-image: url(/img/bg-main-desktop.png); background-repeat: no-repeat; background-position: 0% 0%; min-height: 100vh; } .container { display: flex; flex-direction: row; align-items: center; } .right-section { display: flex; align-items: center; justify-content: center; width: 50vw; } .right-section form { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); gap: 2rem; } .grid-1 { display: flex; flex-direction: column; grid-column: 1 / 3; } .grid-2 { display: flex; flex-direction: column; grid-column: 1 / 3; } .card-information { display: flex; flex-direction: row; grid-column: 1 / 3; gap: 1rem; } .card-date { display: flex; flex-direction: column; } .double-input { display: flex; flex-direction: row; gap: 1rem; } .grid-3 { display: flex; flex-direction: column; } p { text-transform: uppercase; font-size: 11px; } input { font-family: 'Space Grotesk', sans-serif; color: var(--light-grayish-violet); border-style: solid; border-color: var(--light-grayish-violet); border-radius: 5px; } #chname { height: 40px; text-indent: 1em; } #cnumber { height: 40px; text-indent: 1em; } #expdate-mm { height: 40px; text-indent: 1em; } #expdate-yy { height: 40px; text-indent: 1em; } #cvc { height: 40px; text-indent: 1em; } #button { color: var(--white); background-color: var(--very-dark-violet); height: 50px; align-self: center; border-radius: 10px; cursor: pointer; grid-column: 1 / 3; } .left-section { width: 50vw; } .card-details { display: flex; flex-direction: row; align-items: center; justify-content: center; } .card-display { color: var(--white); z-index: 1; } .card-number { position: relative; top: 0px; right: -120px; font-size: 28px; letter-spacing: 0.1rem; } .card-name { position: relative; top: 45px; right: 220px; font-size: 12px; } .card-expiry { position: relative; top: 45px; right: 20px; font-size: 12px; } .card-front-img { position: relative; top: 100px; left: 200px; z-index: 0; } .card-logo { position: relative; /* top: 140px; left: 230px; */ top: -60px; left: -210px; } /* Back of Credit Card */ .card-back-img { position: relative; top: 80px; left: 260px; z-index: 0; } .card-cvc { position: relative; top: -60px; left: 600px; font-size: 12px; }

 
 
 
   
 
0000 0000 0000 0000
 
Jane Appleseed
 
00/00
 
 
 
  
000
 
 
 
 
 
 
 
Cardholder Name
  
 
 
Card Number
  
 
 
 
EXP. DATE (MM/YY)
 
 
  
 
  
 
 
 
 
CVC
  
 
  
 
 

Ich habe versucht, die Breite der Rasterspalte manuell anzupassen, und es hat irgendwie funktioniert. Ich kann die Breite der Eingabe manipulieren, wenn ich für beide Spalten feste px-Werte verwende (z. B. 200px 300px), aber das löst mein Problem immer noch nicht.

Die Div-Klassen .grid-1 und .grid-2 (die diese Eingabe enthalten) werden verkleinert, .card-information jedoch nicht.