
Responsive Interactive Article Preview Component | HTML, CSS, JS
Design comparison
Solution retrospective
Incremental growth in problem solving skill
What challenges did you encounter, and how did you overcome them?See Readme page here
What specific areas of your project would you like help with?My project isn't broken in the live page but it is in the screenshot generator.
Community feedback
- @khatri2002Posted about 2 months ago
Hi @okayishmael!
The developed solution looks great! Below are some suggestions for improvement:
1) Fix Stretched
drawers
ImageThe
drawers
image appears stretched because it does not maintain its aspect ratio due to limited space.
Addingobject-fit: cover;
ensures the image fills the available space without distortion by cropping it. However, the design reference shows that the image should only be cropped from the right side, not equally from both sides.Hence, Use both
object-fit: cover;
andobject-position: left;
to align the image correctly:.card-img { object-fit: cover; object-position: left; }
2) Fix Initial Click Issue on Share Button
When the share button is clicked for the first time, the share box does not appear.
However, on the second click, it appears and starts toggling properly. This happens because of the following condition in your code:if (shareActive.style.display === "none") { shareActive.style.display = "block"; } else { shareActive.style.display = "none"; }
- Initially,
display: block;
is not provided. - On the first click, the condition fails and assigns
display: none;
. - Now that
display
isnone
, the toggle logic starts working from the second click.
Fix (Better Approach - Using CSS Class Toggle)
Instead of manually checking conditions, use a CSS class toggle:.hide { display: none; }
shareActive.classList.toggle("hide");
Why This is Better?
- No need for condition checks — simply toggle a class.
- Less code, better readability, and cleaner implementation.
Keep up the great work! 🚀
Marked as helpful1P@okayishmaelPosted about 2 months ago@khatri2002 Thanks a million. I was wondering why it was active on the first click. I did what you said and it now works. Please check it out again.
Secondly I thought
object-fit: cover;
was only to be applied to background image. But thanks again for teaching me. I applied it to the image and it looks better now even though my is not BG image.I see you're advanced than I. Do you have any learning path that you can share. As in where is best to learn javascript?
I followed your github as well.
Cheers!
1@khatri2002Posted about 1 month ago@okayishmael
I didn't follow any specific learning path. I just kept practicing consistently. I've been working as a professional developer for the past year, but back when I was a student, I did check out YouTube tutorials from time to time. You might find them useful too!
1 - Initially,
- @grace-snowPosted about 1 month ago
It's important you write media queries in rem or em and not pixels. Change your default text size in your browser settings and watch how badly this breaks at the moment. This breakage is because of the pixel based media queries and possibly a few other places where pixel units have been used.
Marked as helpful0P@okayishmaelPosted about 1 month ago@grace-snow Thanks, I made the recommended updates.
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