Submitted 9 months ago

Responsive layout using media queries

V.S Karthik Tirumalasetty•130

@VSKarthikT

A solution to the Product preview card component challenge

Preview Code

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

Code

Please log in to post a comment

Community feedback

jvondungen•140
@jvondungen
Posted 9 months 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.

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