Skip to content
Submitted 19 days ago

Responsive Blog Preview Card

Daniel Gregg•40
@Dcgregg
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I learned how to properly center a flexbox in the center of the screen, something that I have struggled with for a while now. I learned how to better space items out, by using dev tools. Next time I would probably change the way that I approached this, by not being hard on myself and to know it's ok to consult the documentation.

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

I was really hard on myself because I couldn't center the card. It turned out, I just needed to sort out the height. But it took about 4 days of stressing to realise, after reading articles it helped.

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

Have I done the media query correctly? I was thinking only one could be needed.

Community feedback

  • Marcos Travaglini•6,210
    @BlackpachamamePosted 19 days ago

    Greetings! you have done a great job 😎

    📌 Some suggestions

    • I recommend using box-sizing: border-box in your universal selector * so that it applies to all elements and not just the body
    • Add a padding to generate interior space on your card. This prevents you from using margin or padding on child elements to achieve the same result
    • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens. For example, use min-height: 100vh instead of height: 100vh
    Marked as helpful
    1
  • 0000yuyu•60
    @0000yuyuPosted 19 days ago

    Does the sections given gap? It looks very similar page.

    1
  • P
    morski13•100
    @morski13Posted 18 days ago

    it looks good, just needs a bit tweaking for the size

    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