REST Countries API Built With React

Community feedback

• 

  Connor•190

  @ayeyaiyaiPosted about 1 year ago

  Looks good! When you set the grid-template-columns it looks like you're doing so in a way that creates 5 separate columns no matter the width of the window. This can cause issues if your screen's width isn't wide enough to display all 5 columns, and will result in some of the columns being off screen and inaccessible. A potential fix would be to use repeat function:

  grid-template-columns: repeat(auto-fit, minmax(/minimum size for each column/, [/maximum size for each column/));

  This would dynamically determine the number of columns based on the width of the window.

  0

  ---

  

  P

  ifaronti•580

  @ifarontiPosted about 1 year ago

  @ayeyaiyai it's 5 columns for desktop only. The design image is 4 for 1440px width. But I wanted to do it full screen for desktop so I added 1 extra. I also wanted to use the card size as in the design image.

  I used media query to change the fractions instead of changing size of card which may require changing some other details on the card.

  But your suggestion will be used for my CSS in future as I think it's a great tip for overflow scroll

  0