Product preview card component only Desktop

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Buenas Alba, enorabuena por terminar el challenge y bienvenida a la comunidad de FrontEndMentor

  Además de lo ya dicho por lucas, me gustaría ayudarte con el tema de centrar tu card, de una manera un poco más sencilla.

  En vez de utilizar margins en tu <section> para poder centrar el card, puedes usar mejor flexbox en el body (que es su elemento padre) y así poder centrarlo, solo necesitas añadirle un height: 100vh para que el body te ocupe toda la pantalla del navegador, y usar flex de esta manera en tu body:

  body {
    text-align: center;
    background-color: var(--color-primary-light);
    margin: 0;
    color: var(--color-dark-grey);
    font-family: 'Fraunces', serif;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
  }
  

  Recuerda que para que esto funcione tienes que quitar los margins del section, y así tu componente quedará completamente centrado!

  Espero que mi feedback te sea de ayuda, si tienes alguna pregunta o necesitas ayuda con algo no dudes en preguntarme, que estamos aquí para ayudar!, un saludo

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Alba, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

  You did a good work putting everything together in this challenge, something you can do to improve the image, is not using it by the CSS because it's not a good practice for SEO reasons, instead of that use <picture> or <img> wrap both images. You can manage better this images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

  You jumped from h3 to h5 and it's better follow the sequence of headings to have the hierarchy, h1, h2, h3...

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0