Design comparison
Solution retrospective
Hi,
Another interesting challenge. I'm happy with the result and I've learned to change styles with active states. My mobile solution works well in my browser with developer settings for iPhone, however I've noticed that when I look at the site on my iPhone the share button does not return to the original pale colour once the social menu has been deactivated. Can anyone point out what the issue could be? Thanks, Cristina
Community feedback
- @buneeIsSloPosted over 3 years ago
Hey! @cr1deg0, Great job on this challenge, The page looks pixel-perfect. To answer your question... I reckon the share button does return back to its original colour but, It's the hover style of the button that stays applied. You can test this by changing the hover style of the button to a different colour. Here's an article I found that should help clear things up :)
Marked as helpful0@cr1deg0Posted over 3 years ago@buneeIsSlo Thanks for the link to the article! It's something clearly to consider moving forward!!
1 - @DmytroTarasiukPosted over 3 years ago
Hi Cristina, You did an amazing job I really like it. Your solution looks very good on a laptop and mobile. However, it is not a fully responsive as on the wide 376 - 620px some components of your card are out of a page. In addition, it's better to use 'rem', 'em', 'vw', 'vh', '%' units instead of px for media-queries to avoid of re-writing unnecessary code. That's all I've noticed.
Have a fun coding. Cheers ;)
0@ixtkPosted over 3 years ago@DmytroTarasiuk Hey, I want to take this challenge but the share tooltip will surely make the component not very responsive in some sizes. Should I move the tooltip to the left so it's contained inside the component?
0@DmytroTarasiukPosted over 3 years ago@Ikhcamot sure. You can position it absolute and once the share button clicked the tooltip will cover 100% width of its container. Don’t forget to add a specific class to toggle share button. Good luck ;)
0@cr1deg0Posted over 3 years ago@DmytroTarasiuk Thanks for the feedback. I'm getting my head around 'rem', 'em', 'vw', etc for the next challenges. Do you have any suggestion on how to make the social media share box responsive with my current solution? At the moment it's positioned absolute with respect to the card, can I make it move with the viewport when the reference is not changing?
0
Please log in to post a comment
Log in with GitHub
Join 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