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)

Merci à vous,

J'avais effectivement pensé au flex, surtout que j'ai fais en sorte d'avoir mon input dans un bloc div.
Effectivement ça marche super bien, j'ai compris, je fais en sorte d'avoir mon site basé que en bloc, pour avoir un meilleur seo, et indexation.

Merci

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