Responsive product card made with Flexbox

Community feedback

• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  Hola Enrique! Voy a asumir que hablas español 😁. Empiezo por la primera:

  • Si es importante el orden de los encabezados ya que los lectores de pantallas cambian la entonación según el tipo de encabezado y eso influye en la accesibilidad.

  • La segunda, cuando es un diseño como este, le das al body display: flex; justify-content: center; align-item: center;

  • La tercera, le das al elemento padre de la imagen overflow: hidden; y las esquinas de la imagen se redondea como las del padre.

  Marked as helpful

  1

  ---

  

  Enrique Mendoza•10

  @kike9978Posted over 2 years ago

  @Enmanuel-Otero-Montano Muchas gracias por tus anotaciones, ya chequé lo del nombre de los encabezados, creo que me faltó explicar que mi problema con el centrado era que para móvil cuando le agregaba al footer como parte de un item flex, se desbordaba el contenido principal para arriba y lo escondía. Y el lo del overflow: hidden no lo había considerado. Muchísimas gracias por comentar, lo tendré en cuenta para futuros proyecto 😄

  1
• 

  a•370

  @Mrcode93Posted over 2 years ago

  you can use grid for responsive, body overflew-x: hidden; for img use max-width: 100%; height: auto;

  1