@AlbanDavid494
Posted
Thanks alot. Let me work on it immediately
I need comments and review on this guys. thanks for the comment have made changes to my code. have leant something
@AlbanDavid494
Posted
Thanks alot. Let me work on it immediately
@zacc-anyona
Posted
Hello @AlbanDavid494, Your solution is good, but there are some few areas you can improve on.
Your page is not well landmarked. For example the div element with class attribution you could have enclosed it with <footer></footer>
. Footer element is used to display author information, contact details. It is normally found at the bottom. But your author details are appearing at the top of the page.
Responsiveness. Your page is not that responsive especially for mobile devices. Consider reformatting your media query to;
@media screen and (max-width: 600px)
/*for smaller screens have a standard a width of 600px*/
<a href=""></a>
to your buttons.Other than that you have done a great job in completing this challenge.
@lahanhelith
Posted
Hey man!
You have done an OK job with your solution but it seems you had trouble centering it horizontally and vertically. For this, you can use CSS Flexbox on the body by using this code in CSS.
body{
display:flex;
margin:0;
min-height:100vh;
align-items:center;
justify-content:center;
}
If you have no idea about what Flexbox is or how you can work with it you can watch this video which explains the concept quite clearly.
Also, there are some things you can change within your HTML such as using a <main> element to contain your card content which does not impact how it looks and using an <h1> tag with a reduced font size which aids in SEO.
Furthermore, it is possible to make the card look responsive on all screen sizes without using a media query which I would suggest you try to achieve.
Good Luck with your Frontend Journey!
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