Skip to content
Submitted 4 months ago

responsive disign with html & css.

zahin abdullah rakin•90
@ZahinRakin
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 am mostly proud of the way I pulled of the text sizing without using the media query. To pull that off I used the font-size: clamp(14px, 2vw, 16px); I don't know if it is alright. but I learned this new.

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

when i was adding the padding the div's size was getting bigger which I didn't want. To solve that I needed to use box-sizing: border-box; this is an amazing css property that I learned doing this project.

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

the border radius of the image. when i scale down the image's border radius disappears. This happens because the image is getting zoomed in. how should I solve this? should I use div then inside that img?

Community feedback

  • Thomas James•160
    @turtlethomPosted 4 months ago

    Hey Zahin, your project looks great! Using clamp is also a great way to create responsive font sizes on different screens.

    If you are encountering weird styling issues (such as the image resizing), I suggest checking out Normalizing CSS. It helps "reset" CSS styles to allow the behavior of those styles to be more predictable.

    • You can incorporate it into your main CSS file or link it to your index.html via another stylesheet (Ex: normalize.css).

    The box-sizing: border-box property is super useful and can be applied to more than just a single div.

    *,
*::before,
*::after {
 box-sizing: border-box;
}

img,
picture {
    max-width: 100%;
    display: block;
}

    I hope this can help with the image sizing issue :)

    Marked as helpful
    1
    zahin abdullah rakin•90
    @ZahinRakinPosted 4 months ago

    thanks at first I didn't understand your comment. Now after couple of days hard work I understand. thanks a lot @turtlethom

    1
    Thomas James•160
    @turtlethomPosted 4 months ago

    @ZahinRakin No problem happy to help :)

    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