Article Preview Component using CSS Animations.

Community feedback

• 

  Majid Mohammed•90

  @majid-techPosted about 1 month ago

  It was well structured and I have learnt from it.

  1
• 

  Vishnuprasad-94•50

  @Vishnuprasad-94Posted about 1 month ago

  Looks great!

  I'm just done learning CSS basics and some JavaScript. I was able to learn some of the more advanced stuff looking at your code.

  I'm leaving this feedback here as a part of my learning path here on Frontend Mentor.

  The Article preview component looks great in portrait and landscape view. However I did notice that since the '.share-option' element, since it's absolutely positioned, gets masked on the right side when resizing to tablet size.

  One easy fix that came to mind was to make the element appear vertical for tablets (min-width: 769px, max-width: 875px), thereby making it fit within the main card element and thus visible at every screen size.

  Here are some changes I experimented with:

  @media screen and (max-width: 875px) and (min-width: 769px) {

  .share-option { flex-direction: column; padding: 17px 12px; }

  .share-option span { margin-right: 0; letter-spacing: 3px; } }

  If there is any other way of fixing it while keeping the share option element horizontal, I'd love to know. Cheers!

  0

  ---

  

  M. Abubakr•250

  @m-abubakr1Posted about 1 month ago

  @Vishnuprasad-94 I'm having trouble understanding your point. Are you suggesting that the .share-option should be placed inside the card instead of extending almost halfway outside? According to the challenge design, that's how it should be—with only the mobile view to have a different active state.

  Please let me know if I've misunderstood your comment.

  0