Comment puis-je empêcher les zones de saisie de ma grille de s'étirer sur l'écran ?

Question

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;
}

<div class="container">
  <div class="left-section">
    <section class="cards">
      <div class="card-front">
        <img src="/img/bg-card-front.png" alt="" class="card-front-img">
        <img src="/img/card-logo.svg" alt="" class="card-logo">
        <div class="card-details">
          <p class="card-display card-number">0000 0000 0000 0000</p>
          <p class="card-display card-name">Jane Appleseed</p>
          <p class="card-display card-expiry">00/00</p>
        </div>
      </div>
      <div class="card-back">
        <img src="/img/bg-card-back.png" alt="" class="card-back-img">
        <p class="card-display card-cvc">000</p>
      </div>
    </section>
  </div>
  <section class="right-section">
    <form action="">
      <div class="grid-1">
        <p id="chname-label">Cardholder Name</p>
        <input type="text" id="chname" name="chname" value="e.g. Jane Appleseed">
      </div>
      <div class="grid-2">
        <p id="cnumber-label">Card Number</p>
        <input type="text" id="cnumber" name="cnumber" value="e.g. 1234 5678 9999 0000">
      </div>
      <div class="card-information">
        <div class="card-date">
          <p id="expdate-label">EXP. DATE (MM/YY)</p>
          <div class="double-input">
            <div>
              <input type="text" id="expdate-mm" name="expdate" value="MM">
            </div>
            <div>
              <input type="text" id="expdate-yy" name="expdate" value="YY">
            </div>
          </div>
        </div>
        <div class="grid-3">
          <p id="cvc-label">CVC</p>
          <input type="text" id="cvc" name="cvc" value="e.g. 123">
        </div>
      </div>
      <input type="button" id="button" value="Confirm">
    </form>
  </section>
</div>

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.

Answer 1

Il est un peu difficile de dire ce que vous demandez, mais si vous souhaitez simplement limiter la largeur de la saisie du formulaire, essayez de définir une largeur définie sur l'élément du formulaire (c'est-à-dire .right-section form {width : 70%;} 或输入的父容器（即 .grid-1、.grid-2、.card-information {width: 70%;}). Ajustez au besoin.