Skip to content
Submitted 19 days ago

Blog Preview Card

Ahmed Zaki•30
@AhmedMahmoud6
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?

Iam Proud that this task made me learn new things and i learned them quickly

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

i've had problem with the media query (the mobile version) i don't know what to do for the mobile version all i made is a margin left and right when it is between the 375px and 390px to avoid the card getting the full width.

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

how to make the mobile version or what to do to solve it right

Community feedback

  • KapteynUniverse•2,170
    @KapteynUniversePosted 19 days ago

    Design images are just how it looks at 375 and 1440px. You don't need to make something for 375 and another for 1440. Real challenge is make it responsive from 320 to infinity and beyond.

    For this one you don't need a media query. You already set a width: 375px; to the .parent and that is all you need. Avoid using hard coded values like that tho. Use max-width: 375px; instead, max-width: 20/25rem would be even better.

    Marked as helpful
    1
    Ahmed Zaki•30
    @AhmedMahmoud6Posted 18 days ago

    @KapteynUniverse sorry i don't understand what's the difference in this scenario between using width and max-width, i mean here i didn't use min-width or something to use max-width so can you explain me what's the difference in this scenario.

    0
    KapteynUniverse•2,170
    @KapteynUniversePosted 18 days ago

    @AhmedMahmoud6 For this challenge there isn't much difference because of the flex on the body, your cards width changing on small screens. But if the card was in the main landmark, because every page needs landmarks for accesibility, it wasn't going to shrink and overflow to of screen.

    Width means that elements size is fixed, can't get any bigger or smaller. It will cause responsive issues on the future.

    Min-width is not something to use all the time but max-width is. It is basically saying i want this item to be at this width but when the screen size is small it can also shrink.

    Marked as helpful
    1

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