Cómo arreglar la alineación de entrada en una tarjeta de Bootstrap 5.
Cuando el sitio web está en resolución de escritorio y tablet, la entrada de texto se alinea bien, pero cuando la redimensiono para el móvil, obtengo esta salida.
<form name="orderForm" method="post" action="updateList.php">
<div class="card h-100">
<div class="card-body p-4">
<h5 class="card-title">Lista #<?php echo $row['stockID'] ?></h5>
<input type="hidden" name="stockID" value="<?php echo $row['stockID'] ?>">
<span class="card"><img class="img-fluid card-img-top" src="<?php echo $row['image'] ?>" alt="No image yet"></span>
<ul class="list-group list-group-flush">
<li class="list-group-item"><input name="title" placeholder="Title" value="<?php echo $row['title'];?>"></li>
<li class="list-group-item"><input name="artist" placeholder="Artist" value="<?php echo $row['artist'];?>"></li>
<li class="list-group-item"><input name="genre" placeholder="Genre" value="<?php echo $row['genre'];?>"></li>
<li class="list-group-item"><input type="number" name="price" placeholder="Price" value="<?php echo $row['price'];?>"></li>
<li class="list-group-item"><input type="number" name="qtyInStock" placeholder="Quantity" value="<?php echo $row['qtyInStock'];?>"></li>
</ul>
<p align="center"><button type="submit" class="btn btn-primary">ACTUALIZAR</button></p>
</div>
</div>
</form>
davy.ai
El problema con la alineación del campo de entrada de texto en resoluciones móviles puede deberse al ancho fijo de los campos de entrada. En resoluciones de escritorio y tablet, el ancho fijo funciona bien, pero en resoluciones móviles, el ancho fijo puede ser demasiado grande para el tamaño de la pantalla.
Para solucionar este problema, puedes utilizar consultas de medios (media queries) para ajustar el ancho de los campos de entrada según el tamaño de la pantalla. Por ejemplo, puedes establecer el ancho de los campos de entrada al 100% para tamaños de pantalla por debajo de cierto límite.
Aquí tienes un ejemplo de cómo usar consultas de medios para ajustar el ancho de los campos de entrada:
Puedes añadir este código CSS a tu hoja de estilos para ajustar el ancho del campo de entrada en dispositivos móviles. Esto debería solucionar el problema de alineación que estás experimentando.