Responsive design , css grids

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. Though for desktop state, the layout is too wide and if you try to zoom out, you will see that the layout doesn't really respond well and just kind of makes the content out of place. For mobile state, it looks fine but it could use more width since it is small.

  Besides Aakash Verma great feedback, here are some other suggestions:

  • Don't use width: 100vw since this will only add a horizontal scrollbar at the bottom, since this value does not account the vertical scrollbar's width.
  • Avoid using height: 100vh on a large container like the main as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • Remove the .container 's height: 50vw. Also, just in general, you don't want to just use vh unit in height or font-size or just in other since it is not consistent and will vary depending on the user's screen-size. It would be better to use rem. Not saying that vh is bad, but using it should be properly controlled.
  • The h3 after the h1 could just be replaced by p tag since the h1 is enough for that section. But if you insist on using heading tag, go with h2. When using a heading tag, make sure you are not skipping a level. If you use h4 then make sure that h1, h2, h3 are all present.
  • Monthly Subscription should be using h2 and not h3 and the pricing should just be a p tag since the heading tag above it already gives information on that section's content.
  • Why us should be h2 as well.
  • Those information on the Why us section, as you can see, those are "list" of things on why the user should "choose" them. Meaning, a ul on it would be really nice and not a single p tag to wrap the whole text.
  • Lastly, just addressing the styling on the overall layout.

  Aside from those, great job again on this one.

  01

  Marked as helpful
• 

  Aakash Verma•9,500

  @skyv26

  Posted over 3 years ago

  Hi! Neha, Very well done, you have completed your first challenge. I will answer all your doubt by telling you the issues with my sugges tion/solution.

  1. Your design a bit wider than expected. I mean you can clearly see in your design comparison. Solution

  .main {
      width: 100vw;
      height: 100vh;
      display: grid;
      place-items: center;
  }
  

  Change above code with below:

  .main {
      width: max-content;
      height: auto;
      margin: 5rem auto;
  }
  

  Your problem will be solve. By solving this I think all will be good. ~~!! Your answers ? what I wrote above answers your all question and try to get more details on MDN.

  Best of Luck

  01

  Marked as helpful