Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive preview card component

P
KurtJF 150

@KurtJF

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • I have not yet grasped on how to use the media query that much, any tips on how to avoid being confused with it?

  • Is it better to use margin vs padding when spacing contents/texts?

I'm not sure why the Design comparison screenshot is showing a different result compared to the Preview Site 😔

Community feedback

@VCarames

Posted

Good job on your project!

Whats confusing for you regarding media queries?

Margin vs Padding all depends on what you're building and what you want out of your thing you're applying it too.

Ex: Padding: When creating a button, you'll use padding because you want to increase the internal size of it.

Margin: You have two paragraphs and they are right next to each other, then you'll use margin to create external space between.

Here's a good read regarding margin and padding: https://medium.com/frontendshortcut/margin-vs-padding-c1fc8ea8bfaf

0

P
KurtJF 150

@KurtJF

Posted

@vcarames thanks for the link you sent! When to use padding or margin made more sense after reading it.

Regarding media queries I am still not sure how to use it in other situations besides using it in screen width breakpoints. What other circumstance am I able to use the media query?

0

Please log in to post a comment

Log in with GitHub
Discord logo

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