Adapter le width du formulaire input

Bonjour,

J'ai une petite question.
Je souhaite que mon formulaire input prenne toute la largeur de l'écran, que ce soit sur mobile , tablette ou desktop.

Mais j'ai un problème sur mobile quand je vais width 100%, ça me créer un dépassement, du coup mon écran bouge. Peut-être que je sélectionne mal le sélecteur ou l'attribut.
Je veux juste une piste, pour trouver ma réponse.

<div class="input-search">
          <input type="text" placeholder="Paris, Belleville" />
          <i class="fas fa-map-marker-alt" aria-hidden="true"></i>
        </div>

input[type="text"] {
  padding: 1.5rem;
  border: none;
  appearance: none;
  background: #e8ebeb;
  outline: none;
  box-shadow: inset 0 10px 10px -6px#BDBFBF;
}

.input-search input[type="text"] {
  padding-left: 7rem;
}

.input-search {
  position: relative;
}
.input-search i {
  position: absolute;
  left: 0;
  top: 23px;
  margin-left: 5rem;
}
::placeholder {
  font-weight: bold;
}

Merci
Modifié par Felipe (27 Apr 2021 - 09:40)

Bonsoir,

flex et grid te permettent de t'affranchir de width:xx% , souvent problématique selon le modèle de boite et les marges extérieures qui ne seront jamais prises en compte.

exemple avec display:flex et flex-grow:

input[type="text"] {
  padding: 1.5rem;
  border: none;
  appearance: none;
  background: #e8ebeb;
  outline: none;
  box-shadow: inset 0 10px 10px -6px#BDBFBF;
}

.input-search input[type="text"] {
  padding-left: 7rem;
  flex-grow: 1;/*==== ajout =====*/
}

.input-search {
  position: relative;
  display: flex;/*==== ajout =====*/
}
.input-search i {
  position: absolute;
  left: 0;
  top: 23px;
  margin-left: 5rem;
}
::placeholder {
  font-weight: bold;
}

Parmi les tutoriels du site sur flex (ou grid) tu trouveras https://www.alsacreations.com/outils/lire/1719-flexbox-cheat-sheet-pense-bete.html

Utiliser "flex-direction: row-reverse" pour afficher la balise <i> devant et supprimer les positions relative et absolute.

input[type="text"] {
  padding: 1.5rem;
  border: none;
  appearance: none;
  background: #e8ebeb;
  outline: none;
  box-shadow: inset 0 10px 10px -6px#BDBFBF;
}
.input-search {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.5rem;
}
.input-search input[type="text"] {
   flex-grow: 1;
}
::placeholder {
  font-weight: bold;
}

Modifié par bazooka07 (22 Apr 2021 - 23:42)

Hello

Linadev a écrit :
je fais en sorte d'avoir mon site basé que en bloc, pour avoir un meilleur seo, et indexation.

J'ai pas compris