Estilos CSS para Pantalla de Orden en HTML

Estilizaremos el código HTML que realizamos para la sección “my order” con las opciones que nos brinda CSS para lograr que usuarios vean su pedido de esta manera:

Cómo aplicar CSS en una orden de compra

Una orden de compra tiene una cantidad indefinida de artículos y por eso debemos implementar estilos de CSS que funcionen tanto para ventas menores como para ventas mayores de miles de artículos.

¿Qué debemos hacer para construir estas dos vistas? Sigue estos pasos:

1. Define las dimensiones del contendor principal y centra su contenido

.my-order {
      width: 100%;
      height: 100vh;
      display: grid;
      place-items: center;
    }

La medida relativa vh, viewport height, define la altura del contenedor. En este caso le estamos diciendo que sea del total de la pantalla.

---

2. Establece el tamaño de la fuente del título y su separación de la barra de totales

.title {
      font-size: var(--lg);
      margin-bottom: 40px;
    }

3. Prepara la grilla de CSS Grid

.my-order-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      width: 300px;
    }

4. Brinda espacio a los elementos y confecciona otra grilla

.my-order-content {
      display: flex;
      flex-direction: column;
    }
     .order {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: center;
      background-color: var(--text-input-field);
      margin-bottom: 24px;
      border-radius: 8px;
      padding: 0 24px;
    }
    .order p:nth-child(1) {
      display: flex;
      flex-direction: column;
    }
    .order p span:nth-child(1) {
      font-size: var(--md);
      font-weight: bold;
    }
    .order p span:nth-child(2) {
      font-size: var(--sm);
      color: var(--very-light-pink);
    }
    .order p:nth-child(2) {
      text-align: end;
      font-weight: bold;
    }

5. Define la parte visual de “shopping cart”

    .shopping-cart {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 16px;
      margin-bottom: 24px;
      align-items: center;
    }
    .shopping-cart figure {
      margin: 0;
    }
    .shopping-cart figure img {
      width: 70px;
      height: 70px;
      border-radius: 20px;
      object-fit: cover;
    }
    .shopping-cart p:nth-child(2) {
      color: var(--very-light-pink);
    }
    .shopping-cart p:nth-child(3) {
      font-size: var(--md);
      font-weight: bold;
    }

¿Qué logra object-fit en CSS?

A las imágenes le aplicamos la propiedad object-fit, ya que resuelve como el contenido se ajustará a su contendor.

Sus valores pueden ser:

• contain → mantiene la relación de aspecto mientras le ajusta dentro del contendedor.
• cover → mantiene la realción de aspecto, pero la ajusta para llenar el contenedor.
• fill → modifica su tamaño para llenar el contenedor.
• none → no se redimensiona.
• scale-down → el contenido se dimensiona como si none o contain estuvieran especificados, lo que resulta en un tamaño de objeto concreto más pequeño.

Documentación.

---

¿Sabías que tener en claro estos conceptos te puede favorecer en una entrevista de trabajo?
Mira lo que te pueden preguntar acerca de HTML y CSS para el puesto de frontend developer.

---

Contribución creada por: Guadalupe Monge Barale