Antaramuka Pengguna Semasa:

Antaramuka Pengguna Diperlukan:

Bagaimana untuk membuat elemen input di bahagian kanan berhenti meluas ke seluruh bahagian kanan? Saya rasa masalahnya ialah lajur grid dalam borang .bahagian kanan saya

Sila lihat HTML dan CSS dan beritahu saya, saya langsung tidak tahu bagaimana untuk membetulkannya.

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

Saya cuba melaraskan lebar lajur grid secara manual dan ia berjaya. Saya boleh memanipulasi lebar input apabila menggunakan nilai px tetap untuk kedua-dua lajur (iaitu 200px 300px), tetapi ia masih tidak menyelesaikan masalah saya.

Kelas div .grid-1 dan .grid-2 (mengandungi input tersebut) mengecut, tetapi .kad-maklumat tidak.