Skip to content
Submitted over 2 years ago

Me gusto como quedo, sigo aprendiendo día a día

Jhonny•180
@jhonnymosquera
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Jhonny, Congratulations on completing this challenge!

    Here's some tips for you:

    1.Fix the alignment of the component using flex and min-height:

    body {
    min-height: 100vh;
    font-size: 16rem;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--primario-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

    2.You need to include the title for you PAGE. Do that inserting in the <head> the tag <title> → <title>Product preview component - Front End Mentor</title>

    3.Something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. You can manage both 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

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord