Article preview component

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Marcin,

  I have check your preview site and you can add nice smooth hover on share + social media, the img looks a bit shrink on mobile size (maybe because the preview site hasn't been updated), also I have read today about aria-label and role="switch" but I am still thinking which one of this we can apply to the button, maybe both of them - anyway check it out here

  Many greetings! :D

  1
• 

  T

  Grace•30,990

  @grace-snowPosted almost 4 years ago

  I don't mind the alternate approach to the mobile share bar at all. That's the kind of thing you could chat through with the designer and decide together.

  However there are some issues with the layout at some screen sizes. I would recommend :

  • Not positioning absolute your main content. That has some big downsides like removing the content from the document flow and can cause overflow. Instead, try flexbox to center it and lose the position and transform

  • use min/max width and heights on your content instead of exact sizes. That will let your elements grow and shrink as needed and stop them getting stretched/distorted.

  Other things I notice are accessibility related:

  • give buttons an accessible name with aria-label
  • wrap all the share icons in buttons or links (that's what they'd be) and do the same

  Hope thats helpful 👍

  1

  ---

  

  Marcin•570

  @FrontmaniaacPosted almost 4 years ago

  Okay I did all those things and it really helped. Thank you very much :) But i am still not sure why the avatar is so big on the comparison report?

  0

  

  T

  Grace•30,990

  @grace-snowPosted almost 4 years ago

  @Frontmaniaac it's because you've not given any sizes to the image. It's a flex item so you can give it a flex-basis with grow and shrink of 0, or just set an explicit height and width.

  If you play with your viewport size, including making it portrait ratio as well as landscape you should be able to See it stretching at the moment. I can see it when I preview desktop version from my mobile.

  Width and height makes it easy to fix, and it's better for performance anyway as it prevents layout shifts caused by images loading in ☺

  1

  

  Marcin•570

  @FrontmaniaacPosted almost 4 years ago

  @grace-snow Okay i have given it a width and height. I have updated my report but it looks the same on the design comparision :( But i believe it has fixed the problem as when i change the viewport the size stays the same. Thanks again for your help!

  0

  

  T

  Grace•30,990

  @grace-snowPosted almost 4 years ago

  @Frontmaniaac you can go back into the solution from your profile and update / generate new report I think. Not sure if that updates the preview image but it might do.

  Well done on sorting it! ☺

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hi there, Marcin! 👋

  Nice work on this challenge! 🙌 Your solution is now looking very nice and it responds nicely! 👏

  Just one more thing I'd like to suggest—adding a little bit of space between the card and the bottom of the page in the mobile layout would be a nice touch so that there's always some room between the two. 😉

  Keep coding (and happy coding, too)! 😁

  0
• 

  Marcin•570

  @FrontmaniaacPosted almost 4 years ago

  Looks like the avatar is wider than in reality on the preview i don't know why.

  0