Skip to content
Submitted about 1 year ago

Article Preview Component - HTML CSS JS and Responsive Design

Martín Beltrán•260
@JMBeltranDev
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I feel very proud of having completed this challenge because it helped me understand flexbox a little more.

What challenges did you encounter, and how did you overcome them?

It was a good challenge to be able to create the message box and when going to mobile change the shape to fit the card.

What specific areas of your project would you like help with?

Any help is welcome.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Krushna Sinnarkar•1,080
    @krushnasinnarkar

    Hi @JMBeltranDev,

    Congratulations on successfully completing the challenge!

    I have a suggestion regarding your code that I believe will be of great interest to you.

    1. Instead of using @media (width < 1000px), you should use @media (max-width: 1000px). This is the correct way to write it.

    2. For the .cards, use max-width: 20.4375rem; instead of width: 20.4375rem; for small screens to ensure better responsiveness:

      .cards {
    max-width: 20.4375rem;
}

    3. Add some margin to the main element, around 20px, so it doesn’t touch the screen when the screen size is very small:

      main {
    margin: 20px;
}

    I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

    Feel free to reach out if you have more questions or need further assistance.

    Happy coding!

    Marked as helpful

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