Design comparison
SolutionDesign
Community feedback
- @mkborisPosted 3 months ago
Hi Surjo-Sen-BD nice work, just a few bits to make it better, the social links appears to be overlapping the card, that's because of the height you set on the card, remove the height from the card so the links don't overlap
Some suggestions to consider moving forward
- Avoid setting fixed heights and widths on elements as this will cause lots of issues with the responsiveness of your layout, the element's content and using padding should determine it's size. Use max-width or min-height if you absolutely have to and the units should be relative units like rem.
- Also, the
buttons
are supposed to be anchora
tags a styled liked buttons. Buttons are for events like toggling content or submitting a form and anchors are for navigation. In this case clicking on the link will navigate you to a new page, so you should should use the anchor element and style it like a button. - It's best practice linking Google fonts directly in the HTML
head
section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times. - Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
- Media queries should be defined in rem not px.
- All content should be wrapped within landmarks. Wrap a main tag around your card.
- Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset.
Hope this helps
Marked as helpful0
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