I was unable to center the component vertically.
Ron Wollschläger
@ron-wollschlaegerAll comments
- @DhruvsagarcoderSubmitted about 1 year ago@ron-wollschlaegerPosted about 1 year ago
Hello Dhruv Sagar, good job on finishing this challenge. 💪
Like @RodrigoHLC already told you, to center the .main div vertically, you can use the flexbox layout. You'll need to make a few adjustments to your CSS.
Here's how you can do it:
body { background-color: rgba(200, 222, 231, 0.89); display: flex; justify-content: center; align-items: center; min-height: 100vh; /* Ensures the body covers the full viewport height */ }
With this, the body element is set to flex display, with both justify-content and align-items set to center the .main div both horizontally and vertically within the viewport.
One more thing you can do is use
<main></main>
instead of<div class="main"></div>
. You can find more on this one here → Semantic HTML5 GuideGreat job on your project, and keep up the excellent work! 👍
2 - @hornjblSubmitted about 1 year ago
Question regarding best-practices:
Would you use a header element for the "Annual Plan" wording just above the price, or rather a p or span element, or?
@ron-wollschlaegerPosted about 1 year agoHi Ben-Lindsey Horn, Congratulations on successfully completing this challenge! 💪
In terms of your question, it's always a best practice to employ semantic elements that accurately convey the content's meaning. In this context, opting for an <h3> element for "Annual Plan" is a sound choice, as it clearly denotes a subheading within the framework of your order plan. Using semantic HTML elements enriches your content with meaning and structure, and in this case, retaining it as an <h3> is entirely appropriate.
Great job on your project, and keep up the excellent work! 👍
Marked as helpful0 - @Anne301Submitted about 2 years ago
I find it difficult sometimes to know where to start, I'm still quite new with coding and applying what I've learned so far.
What really helped for me is to find a coding buddy, I've learned tonnes of new concepts while working through Live Stream on VS
@ron-wollschlaegerPosted about 2 years agoHi Anne, you are looking for a coding buddy? I can help you with that. I am a beginner myself who works as a graphic designer and wants to shift to frontend development. Not only that, but I also like UI and UX Design, which I want to improve to while studying frontend related languages. I don't know if Backend is something for me, but that's a story for another day.
I have met some new friends in this community and want to make a small but like-minded group to grow and to help each other. We are currently three and right now start our first personal project together while trying to solve every challenge on this website here.
If this is something you would like, tell me more about you and your plans on Discord or Slack. (Discord: pxMahio 🍉 #8485)
Have a nice day! 😁
0