Design comparison
Solution retrospective
I don't know how to do the escalated thing in the stars and the reviews ☹ everything else is ok i think Any feedback is welcome UwU.
Community feedback
- @elaineleungPosted about 2 years ago
Hi Alexis, good to hear you're having fun! About the positioning of the stars and also the cards, what you can try is to firstly change grid to flexbox and then add some margin to the child elements, like this:
.Main_rate { display: flex; flex-direction: column; align-content: unset; align-items: flex-end; } // first child element .Main_rate:nth-child(1) { margin-right: 6rem; } // second child element .Main_rate:nth-child(2) { margin-right: 3rem; }
If that works for you, then try doing the same thing to the cards. That's what I used in my solution essentially!
1 - @correlucasPosted about 2 years ago
👾Hello Alexis, Congratulations on completing this challenge!
I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code:
You made your html structure entirely with
div blocks
but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use<article>
instead of the<div>
.✌️ I hope this helps you and happy coding!
1 - @NationsAnarchyPosted about 2 years ago
Good job with the solution, Alexis!
If you want those star ratings/review cards to be escalated like the design - you can use the CSS Grid system, where you can align elements within a grid/table system, that way you can have them align accordingly :D
https://www.w3schools.com/css/css_grid.asp
Feel free to play around it - and let us know what else we can help you as well. Happy coding!
1
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