Design comparison
Solution retrospective
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
- @turtlethomPosted 3 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 singlediv
.*, *::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 helpful1@ZahinRakinPosted 3 months agothanks at first I didn't understand your comment. Now after couple of days hard work I understand. thanks a lot @turtlethom
1 - You can incorporate it into your main CSS file or link it to your
Please log in to post a comment
Log in with GitHubJoin 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