Countries API using Next.js 13 and TailwindCSS

Community feedback

• 

  Saad Hisham•1,750

  @Saad-HishamPosted over 1 year ago

  Great job on completing the project! Your work is impressive and the functionality is perfect. ❤

  I have some suggestions to improve the design and make it match the intended design. First, give the card a maximum width of 270 pixels. You can add the following code:

  a.bg-white.mb-6.shadow-lg.cursor-pointer.dark:bg-darkModeItem.rounded-md.pb-4.hover:scale-105.transition-scale.duration-500 {
  max-width: 270px;
  }
  

  Secondly, add space between the items in the row. You can use the following code:

  
  .mt-12.w-full.flex.justify-center {
  justify-content: space-between;
  }
  

  Finally, set the width of the parent row to 100%. You can use the following code:

  
  .grid.grid-cols-1.xs:grid-cols-2.md:grid-cols-3.xl:grid-cols-4.gap-8.justify-around.xs:justify-between {
  width: 100%;
  }
  

  These changes should help improve the design and make it match the intended design. Keep up the great work!❤

  Marked as helpful

  0