Article Preview Component

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, ughm the desktop layout is destroyed at the moment though but the mobile state looks fine. Maybe finishing up the desktop layout would be really great.

  Some suggestions would be:

  • Avoid using height: 100vh on a large container like the body 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.
  • To be honest, the bold text is not really a heading tag since it just looks like an opening to a blog of some sorts, because if you tried to read it, it is just the opening to the bottom text.
  • Also, on a site, always have a single h1. Since there are not visible text that are suitable to be h1, the h1 would be a screen-reader only heading. Meaning it will be hidden visually but present for screen-reader users. On this, the h1 would have like sr-only class and the text-content should describe what is the main-content is all about. The h1 could be placed as the first text insid the main. Have a look at this snippet of mine about the implementation of it.
  • Person's image should be using the person's name as the alt value like alt="Michelle Appleton".
  • The arrow-share-button should have either aria-label attribute or sr-only text inside it which defines what the button does. It could be aria-label="share to social media dropdown"
  • The button as well should have a default of aria-expanded="false" attribute which will be set to true if the user toggles the button and vice-versa.
  • Those social-media links could be inside a ul element since those are "list" of links.
  • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.
  • Lastly, for the desktop layout to be addressed.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Giedrius•120

  @giedrius-zavisaPosted about 3 years ago

  hello, @pikamart

  I went through my work and changed some things according to your suggestions, but the desktop layout part stumps me, because it works perfectly for me. As you can see in the 'Design Comparison' above and in the screenshot in my README, everything works fine. At most, the view might look weird for a bit because there are no adjustments when it gets to tablet-sized screens, but mobile and desktop is all good for me. Could you expand on the problem for me, if it still persists? Or perhaps you have any ideas why it might be happening? I tried it out and I can't seem to reproduce the problem. Everything works on my end.

  In any case, thanks for the feedback. It has been very helpful! :)

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @Sypnotick Hey, great that you find it useful^^

  For my end, the only visible part is the image. I am using a 1366x768 monitor , maybe you are using a large screen on this one? I could send an image to you in slack but you haven't set you slack username on your profile though.

  But if you are using large screen, try to change the screen-size like 1366

  0