single-price-grid-component-master

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, good work on this one. Layout for both desktop and mobile is good.

  A couple of suggestions would be:

  1. Removing that width: 100vw on the body tag wo that it will remove that horizontal bar at the bottom.

  2. It will be better if you don't use height: 100vh on the body tag, it might look good when not inspected, but if you start inspecting it, dev tools at bottom, you could see that your content is being pushed to the top or bottom, since height: 100vh only gives an element 100% of the remaining screen's height. Using min-height: 100vh will be much better, then just add padding to the top and bottom of the body tag, to prevent element touching ceiling and flooring.

  3. Too many h1 being used. It will be really good if you somehow changed those to other header tags. Keeping only 1 h1 per page will be a good practice.

  4. Adding a cursor: pointer to the button will be good, making it more feel natural since it is interactive element.

  5. Reaching mobile state, remove the width: 100vh to remove horizontal swipe.

  5.1. Removing the height: 100v again on the body tag to allow the content give dimension to the body. Then give padding to the top and bottom of it.

  Overall, good work^^

  1

  ---

  

  Allamprabhu•120

  @Allamprabhu2003Posted over 3 years ago

  @pikamart Thank you for suggestions

  0
• 

  pawel975•190

  @pawel975Posted over 3 years ago

  Hi!

  When doing media queries, I suggest you to write only those properties which you actually changing. Code is much shorter and properties not included in media queries are the same as they were declared at first.

  1