Skip to content
Submitted 4 months ago

Responsive with flex and max-width

simgeduru•50
@simgeduru
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 coded faster than the previous time.

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

I had a hard time adjusting the shadow size for phone and desktop. I solved it with the media query.

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

how can I adjust the shadow size without the need for media query? thank you for your help

Community feedback

  • Monica I.•200
    @monicaivanovPosted 4 months ago

    Hi, for box shadow I used box-shadow property: box-shadow: 10px 10px rgba(0, 0, 0, 0.497);

    I like a lot css-tricks website: https://css-tricks.com/almanac/properties/b/box-shadow/.

    Happy coding!

    Marked as helpful
    0
  • Ramazan Karatay•100
    @RamazanKrtyPosted 4 months ago

    Hi Simge,

    It looks good.

    • But when I want to view the code, it links to another repository (qr code compenent).
    • Also, you can start from h1 instead of h3 directly in the code.
    • After giving different classes to all p tags, it seems a bit complicated to choose p:nth-child(5) again.

    Once more - Really Good Job

    Marked as helpful
    0
    simgeduru•50
    @simgeduruPosted 4 months ago

    @RamazanKrty Hi Ramazan,

    I must have copied the wrong link. You can view it by selecting the Blog-Preview-Card branch. Thank you for the warning. Thank you for your suggestions, I will revise it.

    The correct link to the project source : https://github.com/simgeduru/FrontEnd-Mentor/tree/Blog-Preview-Card

    0
  • Craowx•180
    @CraowxPosted 4 months ago

    Great solution

    Marked as helpful
    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