Design comparison
SolutionDesign
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @Edwin6666 ๐, good job for completing this challenge! ๐
Here are some suggestions you might consider:
- Try to use semantic tags in your code. More information here:
With semantic tags:
<body> <main class="container"> <article class="order"> . . . <article> </main> <body>
- Update to this to have the .container element centered
.container { /* width: 600px; */ /* height: 430px; */ display: flex; /* flex-wrap: wrap; */ min-height: 100vh; /* margin: auto; */ align-items: center; justify-content: center; } .container .order { . . . /* margin: 7%; }
More information: A Complete Guide to Flexbox (CSS-Tricks) | How TO - Center Elements Vertically (W3Schools)
- Add
left: 0; right: 0;
to the footer element to center it horizontally.
I hope those tips will help you.
Good Job and happy coding !
Marked as helpful1
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