Mike Hayden• 1,005
@mickyginger
Posted
Hi Huÿne Lê! 👋
This looks great!
I would be careful about using percentages for margin as you can get very unexpected results on different viewport widths.
I like that you've used the semantic tags header, main, and footer, but I think in this instance the main content is the component. header and footer probably make more sense in terms of an entire web page, or perhaps and article.
I would probably advise you set up your HTML like so:
<body>
<main>
<div id="component">
<img />
<h1>Order Summary</h1>
<p>...</p>
<div>...</div>
<a class="primary" href="...">Proceed to payment</a>
<a class="secondary" href="...">Cancel order</a>
</div>
</main>
<footer>...</footer>
</body>
You can then set the background image on the main tag, and center the component using flexbox:
main {
display: flex;
align-items: center;
justify-content: center;
}
I would then set a max-width on the component:
#component {
max-width: 425px;
}
Hope that's useful! 🤓
Marked as helpful
1
Tien Huynh• 50
@tienhuynh-tn
Posted
@mickyginger Thanks for your helpful feedback. I will update in the future <3
0
