Skip to content
Submitted over 1 year ago

HTML, CSS, Responsive design

Mehrdad Kordi•40
@Dollarage
A solution to the Product preview card 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 did the desktop design of the page very fast, but I got stuck on the responsive mobile part. I had to experiment with styles in order to make the page responsive.

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

Setting styles for responsive mobile version was a bit challenging but I managed to make a mobile version.

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

If you know some good study and practice material about responsive web design please introduce them to me. Thank you for reading this!

Code

Please log in to post a comment

Log in

Community feedback

  • Bienvenue•220
    @bienvenudev

    Hello!

    Congrats.

    Here are a few suggestions that might make things even better:

    • You don't need to change the width of the body.
    • Try to make this responsive on all screen sizes
    • Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/
    • Avoid setting font-sizes in px, use rem instead.(https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5).
    • Instead of setting a fixed width on your main, consider using max-width in REM units. This allows the card to adapt to different screen sizes while maintaining its layout.
    • Similar to width, avoid setting a fixed height on your main.This ensures the content can adjust to different content lengths.

    Additional resources:

    • Check out Grace's walkthrough: https://fedmentor.dev/posts/html-plan-product-preview/

    • Kevin Powell's Video on CSS Units: https://www.youtube.com/watch?v=N5wpD9Ov_To (please subscribe to his YT channel and check out his other videos) +

    • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

    I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

    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