I've just completed a social-link-prof challenge from frontendmentor!

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @AmandeepGuggi,

  Congratulations on successfully completing the challenge!

  Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful!

  1. Centering the Card: Instead of using margin to align the card to the center, you can use flex or grid properties for better alignment.

     body {
         display: flex; /* OR display: grid; */
         justify-content: center;
         align-items: center;
         height: 100vh;
     }
     

  2. Responsive Design: Your card is not responsive below 350px, mostly because of the fixed width of 350px given to .card. You can use max-width: 350px instead and utilize media queries for better styling.

     .card {
         max-width: 350px;
     }
     

     @media (max-width: 350px) {
         /* Write new styles for screen size smaller than 350px */
     }
     

  3. Using Grid: Using grid reduces work and makes it easier to align content and design responsive layouts. Here are a few advantages of using CSS Grid:

     • Two-dimensional Layout: Grid allows you to design layouts in both rows and columns, making it more versatile for complex designs.
     • Easier Alignment: With properties like align-items, justify-items, and place-items, aligning content becomes straightforward.
     • Flexible Item Placement: Grid makes it simple to place items anywhere within the layout without changing the HTML structure.
     • Responsive Design: Using fr units, minmax(), and media queries with Grid makes it easier to create responsive designs.

     Given these advantages, it's preferable to use Grid for layout design.

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  Marked as helpful

  0
• 

  Yash Bhatt•280

  @Y-ashbhattPosted 4 months ago

  Hello!!

  Congratulations on completing this challenge.

  There might be some confusion as I checked your code and your have not used Grid but Flexbox.

  As for grid it's mainly used to make 2D layouts whereas flexbox is mostly used to make 1D.

  A nice guide for Grid is Guide to CSS Grid .

  For Flexbox its Guide to Flexbox.

  Hope you find it helpful.

  Marked as helpful

  0

  ---

  

  AmandeepGuggi•100

  @AmandeepGuggiPosted 4 months ago

  @Y-ashbhatt Thank you for suggestion. I have a little confusion between where to use grid and where to use flexbox. I will work on it from next time.

  1