Responsive landing page using CSS flex

Community feedback

• 

  Shard Codes•430

  @Shard-CodesPosted over 2 years ago

  Hello there, Rishabh you great job on the challenge

  Though I do have some suggestions for you to improve.

  1. Remove the text-align property from the body and add min-height 100vh as well as justify-content to center, And add padding 1rem to the left and right, Like this.

  body {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      min-height: 100vh;
      margin: 0;
      padding: 0 1rem;
      background-color: HSL(212, 45%, 89%);
      font-family: 'Outfit', sans-serif;
  }
  

  2. Now remove the margin-top from your card element and set text-align to center, Like this.

  .card {
      background-color: white;
      padding: 15px;
      border-radius: 1rem;
      max-width: 250px;
      text-align: center;
      margin-top: 100px;  /* Remove this */
  }
  

  And with that, you are good to go. I hope this helps, Happy coding 😊

  Marked as helpful

  1
• 

  Rishabh Jasiwal•10

  @itsRishhPosted over 2 years ago

  @Shard-Codes thank you for checking up my content and sharing your views over it. I have to say that your tips proved really useful to me. I edited my code after your suggestion and found that it didn't made much changes in the design but it made things handy!

  Thanks again!

  0

  ---

  

  Shard Codes•430

  @Shard-CodesPosted over 2 years ago

  @itsRishh You're welcome, I'm Glad I could help.

  0