@mkboris
Posted
Hi TalalTahir01 nice work, there seems to be an issue with the link to the github repo. This challenge doesn't necessarily need any media queries. You can learn about responsive design and mobile first development here Mobile-First Development.
Some suggestions to improve your work
- All content should be wrapped within landmarks. Wrap a
main
tag around card. and afooter
for the attribution - The
buttons
are supposed to be anchor tagsa
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. - The .small-box needs a
max-width
defined not a fixedwidth
and should be defined in rem, also no height. 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. - You can easily center the card by adding on the body so you wont have to use margins center it
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- 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 helpful
@TalalTahir01
Posted
@mkboris thank you so much for putting the time in it. I'll dive deep at all the things you've said try not to make the same mistakes in the future.