Responsive Landing Page using CSS Grid and Flexbox

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @yashikabhargava 👋🏻

  I have some quick tips to help you fix the accessibility and HTML issues. Also, some other suggestions about the layout.

  • First let's fix the accessibility issues, in your markup <div class="container">...</div> should be <main class="container">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issues.
  • Now let's get to fixing HTML issues, in your code when you added the links you made a typo or forgot to close their tags. So instead of this:

  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap" rel="stylesheet"
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  

  it should be like this:

  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap" rel="stylesheet" />
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
  <link rel="stylesheet" href="style.css" />
  

  and this will fix HTML issues.

  • For the music icon you should remove alt and add aria-hidden="true", like so, <img class="plan-img" src="images/icon-music.svg" alt="" aria-hidden="true>. You can read more about it here.
  • Now, let's position the card in the center of the screen. Add this code to body, like so:

  min-height: 100vh;
  background-image: url(images/pattern-background-mobile.svg);
  background-repeat: no-repeat;
  background-size: 100vw;
  text-align: center;
  background-color: hsl(225, 100%, 94%);
  padding-top: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  

  this is how body should look like.

  • One last suggestion would be to play with the size of the card and make it a little bit bigger, but that's just a personal preference 🙃

  I hope this was helpful 👨🏻‍💻 Overall, you did a great job for the first project. Cheers 👾

  Marked as helpful

  2

  ---

  

  Yashika Bhargava•10

  @yashikabhargavaPosted about 3 years ago

  @kens-visuals Thank you so much, This is really helpful😄.

  0
• 

  Thiago Santos•295

  @thiago-hdsPosted about 3 years ago

  Hi Yashika! Your solution looks great to me!

  Just a couple suggestions:

  • you can just set overflow:hidden on the container. No need to give a border-radius to the image also
  • try to fix the accessibility and HTML issues reported

  Nice work!

  Marked as helpful

  1

  ---

  

  Yashika Bhargava•10

  @yashikabhargavaPosted about 3 years ago

  @thiago-hds Thank you for your feedback. I'll definitely make the necessary changes.

  1