Article preview component using vanilla CSS and JS

Community feedback

• 

  Eric Salvi•1,350

  @ericsalviPosted over 3 years ago

  Hey looks good. Just a few things you’ll want to check out. Accessibility issues reported https://www.frontendmentor.io/solutions/article-preview-component-using-vanilla-css-and-js-Asis7BSUA/report

  When I check the site out on my iPhone the sharing icon doesn’t have a background color and the break point for landscape is not responsive.

  1

  ---

  

  Abdulla•60

  @furhartPosted over 3 years ago

  @ericsalvi Thanks for the feedback! Accessibility is something I've been meaning to look into in detail for quite a while.

  As for your iPhone, can you please tell me which browser you're using? Can you please also give me more details on "the break point for landscape is not responsive"?

  Thanks again.

  0

  

  Eric Salvi•1,350

  @ericsalviPosted over 3 years ago

  Hey @furhart, so the responsive issue I realized had to do about the landscape social sharing active state not being above the button when clicked. I can see how a bit more information would have been more useful to you. ;)

  The background color to the button for the social sharing is not loading for me on my iPhone SE using Safari. The issue I see on my Mac is that there is no background being set for the button itself and instead is coming directly from the browser's user-agent internal stylesheet. I think the way iOS handles this for buttons is different than that of Chrome on a Mac. Just make sure you physically add the background variable for the non-active state and this should not be a problem.

  Also, it looks like you can fix the responsive issue but sort of undoing what you did for the text and container class, and then you'll be able to do a bit more precise placement of the social sharing on desktop.

  What I would do is turn off overflow on the container and then you'll need to set a top left and bottom right border-radius on the image. Make sure you adjust it for mobile too. In the text class, you'll need to add a position of relative so that you can use the absolute positioning of the share menu in relation to the text container. Get rid of the left percentage and change it to a right -66px.

  The menu now will go off the page when you get a bit smaller so you may have to adjust your breakpoint to go to the mobile version a bit sooner.

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  small issue with your positioning of the social popup menu in the desktop layout. It is not staying above the button but moving depending on page width

  1

  ---

  

  Abdulla•60

  @furhartPosted over 3 years ago

  @palgramming thanks for the feedback, I think I know where the problem is. But I'm pretty sure it didn't do that when I was testing it 😂

  0