@py-code314
Posted
Hello,
Great job. Looks almost identical to the original design file. But I noticed a few issues regarding responsiveness.
- Content is overflowing when zoomed in. Change
heighttomin-heightin.main-contentto prevent that - When I make the screen narrow, around 1030px mark card is increasing in width. You might wanna check why that's happening
- You will benefit from adding some kind of CSS Reset on top of the code. Just google it for any modern css reset
- Do some research about
clamp()function. You can use it effectively to avoid writing multiple media queries - You can use
<blockquote>element for.profile-bioif you want. I think it's more semantic
I hope these will help you to get better. Cheers!
Marked as helpful
@AlvaroPrates
Posted
Hey, thanks for the great feedback!
I adjusted the height, the responsiveness really got better.
About the card increasing in width when the screen is close to 1030px, it is because of the media-query. I implemented the media-query because in the figma file there is a requirement for tablets where the card has a larger width (in the README file there is some screenshots).
About the <blockquote> tag, I agree with you. I've changed that.
Finally, thank you for recommending clamp(), I will get better acquainted with this function and try to use it instead of media-queries
@py-code314
Posted
Oh sorry, I don't have PRO subscription. So you know better
Happy coding 🎉
