Mobile first and Responsive landing site

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. The desktop layout is fine and the mobile state is fine as well.

  Some suggestions would be that:

  1. Your navbar elements should be wrapped inside a tags and not just li. Since they are links, nesting them in a tags is the right way.

  2. Do not remove the outline on the buttons or in any other interactive elements. Those outlines serves as a visual pointer, especially when using keyboards only. If you were to remove the outline, make sure to add some visual on the :focus state on the element, just to signify that a user is in the element.

  3. On the modal pop up.

  3.1. The x button should be on the right side and you should wrapped it inside button since it is interactive element.

  3.2. The layout on the modal seems different to what it should be. You are missing some details here and there. You could check out my solution to have a guide on the details or how to tackle it.

  3.3. You can remove the scrollbar on the modal by adding something like this

  /* Hide scrollbar for Chrome, Safari and Opera */
  .example::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .example {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  

  Just simply change the selector to the selector which have the overflow property declared.

  4. Resizing the browser, your layout is getting narrow center, it will be really good if it doesn't scale like that. Making it have a fixed max-width then just add the width: 100% something like that. Just to prevent it looking like squished.

  5. Your hamburger menu as well needs to be wrapped inside a button element. This will really help screen-reader user to quickly navigate the navbar dropdown. For accessibility.

  6. Lastly, adding a disable property on the out of stock button will be really good.

  But still, good work on this one^

  1

  ---

  

  kirubakk•245

  @KIRUBASHANKAR26Posted over 3 years ago

  @pikamart Thank you for the suggestion, your code is awesome.

  0