Skip to content
Submitted 10 days ago

Responsive layout using media queries

V.S Karthik Tirumalasetty•130
@VSKarthikT
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

Solution retrospective

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

I am proud of how used flex box direction to change using media queries for mobile and desktop layouts and I have tried to use less CSS than before

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

I have encountered a issue where margin is automatically applied to paragraph elements even after resetting them in the body element, I got confused in this part

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

I would like help on how to effectively use media queries and do I have to set max-width and max-height since in the given design there are set heights and widths or I can set them as auto

Community feedback

  • jvondungen•110
    @jvondungenPosted 9 days ago

    Nice job on this design. Your solution mimics the design perfectly in both the mobile and desktop widths. I like how your CSS code includes comments for readability. This also creates a nice separator keeping the code clean. I also noticed that you combine classes, to minimize the code. This is something I am working on, so I appreciate seeing how you did this.

    0

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