Mobile-first article preview using JS toggle and CSS pseudo element
Design comparison
Solution retrospective
This is my third submission and the first occasion to write this optional comment. I apologize for the messy and unorganized JS code for this assignment. I've been self-teaching myself HTML, CSS, and JS for about a month now, and it is not easy... but very fun!! Happy coding everyone!
Community feedback
- @ovidiuantonioPosted almost 4 years ago
Hello Seo Kim,
This is a pretty good solution, not bad for your 3rd project!
I have a few tips for you, that can help improving your solution:
- I recommend you stop using %, instead you can use rem, em, or pixels; using % is good in some situations but here, in the
.wrapperfor example, using a fixed value is better (the content inside doesn't overflow anymore)! - after you modify the height of the
.wrapperyou will see that the popup will not be properly aligned, you can play with the values oftopandleftto align it. You can also addcursor: pointer;to the popup close button. - you switch to the mobile version too late, at 440px the card already overflows, so you can modify the breakpoint to 690~700px
- your js is clean and you gave proper names to the variables, good job with that!
That's all! Happy coding and keep going! Fighting!
1@ksyksy815Posted almost 4 years agoGood morning from Korea! :) Thank you for your detailed comment. I guess I have been unconsciously ignoring the rem and em units because I am not familiar with them.. hahaha... I will learn more about them and surely update the things you mentioned!
0 - I recommend you stop using %, instead you can use rem, em, or pixels; using % is good in some situations but here, in the
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