Design comparison
Solution retrospective
All feedback welcome.
Community feedback
- @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
toposition: absolute
instead ofrelative
. Remove yourtop
value and usebottom: 0
instead. For this to work, you also need to set your .preview__card toposition: relative
. Here's an article on absolute positioning you might find useful. 😄 Happy coding!
1@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@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:
- On your
.inner__container
removeflex-wrap: wrap
and addflex-direction: column
- Change your
width
on theh3
,p .info
, and.avatar__container
tomax-width
(don’t forget to do this for the media queries as well!) Keep the same values you used forwidth
.
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 toposition: relative
) and then use bottom and right values to position it instead of top. In this case I'd also removefloat: right
. Hope this helps!0@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@c0dz-wqPosted about 4 years agoHi @brasspetals. I made some small adjustments to the design. Would you be so kind to review it? I would greatly appreciate it.
0@brasspetalsPosted about 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@c0dz-wqPosted about 4 years ago@brasspetals You rock! Thank you. Moving on to the next one. 🤓
0 - setting the font-family in the
- @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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord