Design comparison
Solution retrospective
- Should have i used a main tag instead of the container div to give semantic meaning ?
- Tried to align the text : by using text-indent , adjusting the font size ( which shouldn't be an option since there is a set value ) , any suggestions ?
- Was my media query lacking ? Thank you for your feedbad.
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi S.Aloui, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- To align some content in the center of the screen, always prefer to use
display: flex;it will make the layout more responsive!
Example:
body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }The rest is great!
I hope it helps... 👍
Marked as helpful0@Souheib-AlouiPosted about 2 years ago@AdrianoEscarabote yes it did thank you , i overlooked it.
1 - To align some content in the center of the screen, always prefer to use
- @mizek1Posted about 2 years ago
Hi! I will try to answer your questions and give you some advice, based on my experience here on FrontEnd Mentor. First, yes, use semantic tags always you can. One thing I always do (and I don't know if it's the best practice, but seems to works very well when the challenges are only one card like this one) is that I always have a <main> tag as first and only child of <body>. This helps me to add meaning to the block and makes it easier to adjust the layout too. When your text doesn't look like the one on design files, try to add some horizontal padding to adjust it, it works if your font-size is correct. Your media query looks fine, I only suggest you to not include "only screen", it can be only "@media (max-width: 375px) {}". Other thing I suggest is that you try to use a higher breakpoint, since some devices will not show desktop layouts properly. I usually use 768px or 1024px.
1@Souheib-AlouiPosted about 2 years ago@mizek1 will do , once i have a better grasp on things. Thank you , i really appreciate the input.
0
Please log in to post a comment
Log in with GitHub
Join 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