Design comparison
Solution retrospective
Very fun project, surprisingly easy to work with react router and the rest countries api once setup correctly. Darkmode via Tailwind is also very intuitive. I had a lot of fun doing this project :)
Feedback is Welcome!
Community feedback
- @DruxAMBPosted 12 months ago
Well done man, you did really great on this project. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project.
<div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>
Using something like this will help you
<div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">
Hope this was helpful*?
Happy Coding!!: DruxAMB
0@JBleziPosted 12 months agoHey @DruxAMB, I prefer to use flex instead of grid, gives more flexibility and keeps the cards at a uniform size. If your monitor is big enough you will have 4 in a row :)
0
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