Article preview

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted about 4 years ago

  Hi Željko, overall good job on this project. The fade in animation for the share menu is very nice!

  Here's a few suggestions to make it even better:

  • setting the font-family in the body . Right now the fonts are inconsistent throughout the solution and don't match the design. You might have to adjust some font sizes and margins after doing this.
  • the positioning of the social container is off on the mobile layout. To fix this, change the .social__container to position: absolute instead of relative. Remove your top value and use bottom: 0 instead. For this to work, you also need to set your .preview__card to position: relative. Here's an article on absolute positioning you might find useful. 😄 Happy coding!

  1

  ---

  

  Željko•210

  @c0dz-wqPosted about 4 years ago

  @brasspetals Thanks for useful tips. I've made the changes, although, some cross-browser inconsistencies can still be encountered. Any suggestion how to overcome that?

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted about 4 years ago

  @c0dz-wq Let's see what we can do. After playing around with the code a bit, I believe this might work:

  1. On your .inner__container remove flex-wrap: wrap and add flex-direction: column
  2. Change your width on the h3, p .info, and .avatar__container to max-width (don’t forget to do this for the media queries as well!) Keep the same values you used for width.

  Hopefully the layout will be more consistent across browsers now. If not, let me know, and I'll see if we can figure out something else!

  The way you positioned your share button might also be causing some goofiness. If you'd like, you could change it to position: absolute (setting the avatar container to position: relative) and then use bottom and right values to position it instead of top. In this case I'd also remove float: right. Hope this helps!

  0

  

  Željko•210

  @c0dz-wqPosted about 4 years ago

  @brasspetals Unfortunately, not much changed. In Chrome looked fine from the very beginning, but in Firefox is 'out of tune'. If I change style to meet Firefox needs then in Chrome doesn't look good, it's really frustrating. This challenge looks easy but there are many small details that you need to pay attention to. Thanks for your trouble!

  0

  

  Željko•210

  @c0dz-wqPosted almost 4 years ago

  Hi @brasspetals. I made some small adjustments to the design. Would you be so kind to review it? I would greatly appreciate it.

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted almost 4 years ago

  @c0dz-wq No problem! I tested it out on Firefox, Chrome, and Safari and it looks great on all three! 👍 The share button toggles very well and there's no more layout issues. Kudos to your commitment to figuring out a fix! Looking forward to your next solution. 😄

  0

  

  Željko•210

  @c0dz-wqPosted almost 4 years ago

  @brasspetals You rock! Thank you. Moving on to the next one. 🤓

  0
• 

  P

  tediko•6,680

  @tedikoPosted about 4 years ago

  Hi Željko!

  Well done! From what I've noticed I suggest you change:

  • .social__container position on mobile. It should stick to bottom of your card.
  • I encountered a problem with horizontal scroll on iphone 6/7/8 resolution (375px width). Somewhere your content is too wide or maybe you left some margin.

  Good luck, have fun coding :)!

  0

  ---

  

  Željko•210

  @c0dz-wqPosted about 4 years ago

  Thanks for your feedback!

  0