Component Page built with Vue

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Layout in general looks great but currently, going into like 390px, the layout is being hidden by the screen and creating horizontal scrollbar.

  Some suggestions on the site would be:

  • Avoid using id to target and style an element since it is a bad practice due to css specificity. Instead, just use class to target element.
  • Also, using header on this layout is not ideal since the content inside the supposed header is not informative at all. For this, it would be better if you only used like a main tag for the .order-component selector instead of a div. Change the header into a div, since header tag inside of a main tag just renders it as a normal tag. Change the section as well into using div since section by itself is not informative unless it is labelled by aria-labelledby attribute.
  • When using img tag, do not forget to add the alt attribute, whether the value is empty or not. Because by not including it, screen-reader will instead read the source path of the image which you don't want. So always include it.
  • When using a heading tag, make sure you are not skipping a level. If you use h3 then make sure that h1, h2 are all present. So use h2 on the annual-plan text instead of h3.
  • The change should be using an interactive element. Interactive component needs to use interactive element. For this one, using either a tag or button would be better.
  • Lastly, the issue that I mentioned earlier about the layout, upon tweaking some css, the padding on the section is the one causing it. You might want to check that one out.

  Aside from those, great job again on this one.

  Marked as helpful

  1
• 

  Francel•370

  @HaemoffyPosted almost 3 years ago

  Thanks, I didnt know about the header level and the use of those specific tags. Thank you for taking time to give me this very helpful feedback, I appreciate it. About the layout, I saw just now but at least in my browser which is Brave, it responded to the resize naturally same in FF but in Google thats where I found the horizontal scroll

  0