3-column preview card component using Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • You should use the <a> tag instead of the <button> tag because the Learn More button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. You can read more about this here 📘.

  CSS 🎨:

  • When using a media query there is no need to repeat all the styles, just overwrite the ones you need.

    main.container {
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 40px auto;
    }
    
    @media screen and (min-width: 514px) {
     main.container {
        /* width: 100%; */
        /* min-height: 100vh; */
        /* display: flex; */
        flex-direction: row; /* NOTE: Only this is necessary in the media query. */
        /* align-items: center; */
        /* justify-content: center; */
        /* margin: 40px auto; */
     }
    }
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  Clive Chambers•230

  @Clive-ChambersPosted almost 2 years ago

  @MelvinAguilar

  Thank you for your feedback i have now switched the buttons to anchor tags and have removed the unnecessary media query properties.

  1