Interface utilisateur actuelle:

Interface utilisateur requise:

Comment faire en sorte qu'un élément d'entrée dans la section de droite cesse de s'étendre à toute la section de droite ? Je pense que le problème vient des colonnes de la grille dans mon formulaire .right-section

Veuillez regarder le HTML et le CSS et dites-moi, je n'ai absolument aucune idée de comment résoudre ce problème.

/* 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
  
 
  
 
 

J'ai essayé d'ajuster manuellement la largeur des colonnes de la grille et cela a fonctionné. Je peux manipuler la largeur de l'entrée lorsque j'utilise des valeurs px fixes pour les deux colonnes (c'est-à-dire 200px 300px), mais cela ne résout toujours pas mon problème.

Les classes div .grid-1 et .grid-2 (contenant ladite entrée) rétrécissent, mais pas .card-information.