Design comparison
Solution retrospective
I was finding it a bit difficult to vertically align the container in the center. I gave a specific height to the mobile version and used margins to align it. It worked but I want to know if there is a smart and better way to center elements vertically in the body.
Community feedback
- @rrebolledo90Posted over 1 year ago
Greetings, after looking over your code on dev-tools I marked some suggestions for you. I noticed that you used position-absolute to center your container. However, one easy way to center your container is to use the margin: 0 auto trick (as you can see below, this gives you the same results as using position-absolute and transform:translate).
Container {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 350px;
border-radius: 40px;
background-color: hsl(0, 0%, 100%);
}
Now, another reason why you can't move your container down is because you donβt have enough height on your parent element (in this case main being the direct parent). If you add the following it moves your container down.
Main {
height : 100vh;
Display: flex;
Align-items: center;
}
Hope this helps.
Marked as helpful0 - @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS NAMING CONVENTIONS π«:
- Looks like the naming conventions you used for
css
needs to be improved a lot, you can take a look at BEM Naming Convention.
- BEM helps to create modular, reusable, and maintainable code. With BEM, you can easily identify which styles apply to which elements, making it easier to modify and update your CSS.
- BEM naming conventions provide a clear structure and naming hierarchy for your CSS classes. This makes it easier to read and understand your code, even for other developers who are not familiar with your project.
- BEM allows for more granular control over styling. With BEM, you can target specific elements within a block and modify their styles without affecting other elements or blocks on the page.
- BEM helps to avoid naming collisions and specificity issues. By using a consistent naming convention, you can avoid accidentally overwriting styles or causing specificity issues that make it difficult to style your elements.
- BEM makes it easier to collaborate with other developers on larger projects. By using a shared naming convention and structure, you can ensure that everyone on the team is using a consistent approach to styling, which reduces confusion and errors.
- This article on CSS-Tricks provides a beginner-friendly introduction to BEM and explains the key concepts and benefits of using BEM.
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @Kamlesh0007Posted over 1 year ago
Congratulations on completing the challenge! Your hard work and dedication are truly admirable. As you continue to hone your skills, here are a few suggestions that may be helpful:
-
Keep practicing and learning new things. The more you challenge yourself, the more you'll grow as a developer.
-
Seek feedback from others. It's always helpful to get a fresh perspective on your work and learn from constructive criticism.
-
Collaborate with other developers. Working with others can help you learn new techniques and improve your coding skills.
Again, congratulations on completing the challenge, and I wish you continued success in your coding journey! π
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