Submitted almost 4 years ago

REST Countries API built with Next.js/React.js, styled with SCSS

@JamesTheLessFC

A solution to the REST Countries API with color theme switcher challenge

Solution retrospective

Hi fellow coders, Here is my final solution. The most difficult part was figuring out how to display the flag images, as they are all different sizes. I decided to "crop" a number of them on the home page so they would all appear as the same size, rather than distorting the dimensions. I'm curious if anyone has a better solution for this? I also decided to concurrently update the "results" on the home page as the user types into the search input element, rather than waiting for them to press enter. It seems to work fine but I'm wondering if that would be a bad idea for someone with a slower device? Not sure. Any other feedback is welcome! Thanks.

Code

Please log in to post a comment

Community feedback

Ay•495
@Aycom366
Posted almost 4 years ago
Hi James nice job with the project concerning the issues of different flag sizes. most times I normally wrap my image inside a container and give that container explicit height or width or even max-width which is recommended. then I set the image object-fit property to cover, width and height to 100%. following this method will always make the image fill the container no matter how big the image is.
Marked as helpful

Join 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