HTML CSS GRID

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout looks great in desktop it just needs to be centered properly, the mobile layout looks odd since there is like a unfilled part of the container.

  Some suggestions would be:

  • Avoid using height: 100vh on a large container especially the body tag as this limits the element's height based on the screen. Instead use min-height: 100vh on it, this takes full height and lets the element expand if needed.
  • Always have a main element to wrap the main content of the page. On this, the .container should be using main instead of div. Also, you don't need margin to center it. On the .container remove the margin and on the body tag add:

  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  

  This will always center your content properly with having to create unnecessary sizes on the screen.

  • On the first section, you don't need to use span to wrap again the text-contents because you could just use the first element that wraps it to style.
  • The pricing should be using p tag and not just span always wrap text-content inside a meaningful tag.
  • Adding a cursor: pointer to the button to make it more natural since it is interactive

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Grishmita•105

  @GrishmitaPosted about 3 years ago

  @pikamart thank you so much for having a look on my solution. And thank you for great advice. I recently started to code regularly and that's why I took frontend mentor challenge and everyone here who are further ahead with respect to knowledge are so generous .I got learn more and more about the details bcoz of you all guys are so generous enough to take time and have a look. And about the container that have to wrap in a main someone else also had advised to do that but i was excited to post solution that it totally went out my mind to correct it and recheck. And lastly thank🙏you

  1

  

  Grishmita•105

  @GrishmitaPosted about 3 years ago

  @pikamart and about the mobile view I made that solution specific for 375px media query width. However I look and recheck it again thanxx

  0