Skip to content
Submitted over 2 years ago

Responsive preview card component

KurtJF•150
@KurtJF
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

  • 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

  • バレンタイン 😈•64,170
    @VCaramesPosted over 2 years ago

    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
    KurtJF•150
    @KurtJFPosted over 2 years ago

    @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

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