Design comparison
Solution retrospective
It was really hard for me to center it and didn't know what height and width to give it, and about that white border that was hard too, please point out mistakes, I would really appreciate it, I am a beginner, please check it out.
Community feedback
- @shashreesamuelPosted almost 2 years ago
Awesome work completing this challenge
You have made a great attempt at this challenge and I would suggest giving your content a bit of padding using
padding
.With regards to your accessibility issues, your document cannot identify the main content hence I recommend wrapping all of the tags in your body element within a main tag.
Hope this helps
Cheers
0 - @Tux3er-IsmaPosted almost 2 years ago
Hi Aziz!!!
All the programmers and developers were beginers, me too 😅, but I will be help you in your next project!!!
-
To center elements you can use a lot of methods. I think the best method is with flexbox. You can use this code to center an element, but you have to put in the parent element:
min-height: 100vh
display: flex;
justify-content: center;
align-items: center;
-
You can get the width and the height with a design model but if you don't have anyone you can aproximate your design like the final result.
-
I also see in your code that you don't use BEM methodology. It isn't obligatory but I recomend it a lot for new beginers. There is the documentation 📖 and a video 📹
Your code doesn't look bad you only need to improve a little. I hope this comment will help you a lot 🖐🏻😉🎉
0@AzizJatoiPosted almost 2 years ago@Tux3er-Isma Hello, I appreciate your time for checking out my code and for the advice. However, when I added the properties you sent me, it changed the whole thing.
0@Tux3er-IsmaPosted almost 2 years ago@Azizhere Thaks. I'm very happy you find this comment helpful 😉
0 -
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