Article Preview Component using Pure CSS & JS
Design comparison
Solution retrospective
It took me some time to figure out that one. Any feedback would be greatly appreciated!
Community feedback
- @correlucasPosted about 2 years ago
Hello again Deborah! Amazing solution as always, due my lack of JS knowledge I tried this one only with CSS, but I can see that yours is working.
There's is only a little error in the mobile version that is not responsive due the
width
you've used making thewidth
behave as fixed and didntshrink
while the screen reduces, to fix that use the good and oldmax-width
. See the code below:.card { background: var(--white); border-radius: 10px; box-shadow: 0px 40px 40px -10px rgb(201 213 225 / 50%); position: relative; /* width: 327px; */ max-width: 327px; }
Anyway, amazing solution, the social icon bar is working mobile and desktop!
Marked as helpful1@debriksPosted about 2 years ago@correlucas Ah yes of course! I know this but I forgot ;) Thank you so much again to have taken the time to look at my code! I corrected it already. Have a nice day!
0@correlucasPosted about 2 years ago@debriks I'm thinking to start to study JS in the coming months, can you point me some good resources to start my studies? I'm a total newbie in JS
1@debriksPosted about 2 years ago@correlucas Yes of course! Here is good handbook ressources to start on JS (and other coding languages if you are interested) : https://thevalleyofcode.com/.
PS: I actually tried the 'max-width' and just realised it actually messes all of my design for desktop, I don't know why :/ so I'll have to look more into it before doing the change that I know is necessary.
0@correlucasPosted about 2 years ago@debriks Oh this is amazing I saved the link and I'll use it in future.
I've checked your code and I can see that broke your layout with
max-width
a quick way to fix it is to use themax-width
with a media query only for mobile. I think this error comes due theposition: relative
. But sorry for have broken your solution, my bad =(Applying the image with css, makes harder to work the image responsiveness, I'd say to use it as
img
orpicture
and usedisplay: block
andmax-width: 100%
+object-fit: cover
to make the image grow ever the div width with automatic height.img { display: block; max-width: 100%; object-fit: cover; }
Marked as helpful1@debriksPosted about 2 years ago@correlucas With pleasure for the ressources! I actually learned a bit of JS during my courses at shecodes.io but I'm not a specialist at all, I still have to learn a lot.
For my solution to the above challenge, I think I'm going to completely redo it actually because I'm aware of the problems you're pointing out and I want to correct them. Also I want to do a version in SASS but I think I'll redo it at the end of all of my Newbie challenges as it was really not the easiest one to do for me, still need to learn a lot about positioning.
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