
Design comparison
Solution retrospective
Found new methods in CSS animations, using various complex techniques with CSS properties like inset
, transform/translate
properties, etc.
Will do it again by using some CSS Preprocessors as well.
The Active design of the mobile version was difficult to understand first, but once I git to know how it's possible using inset
property, it got half easy, other half was still a hassle to know what values are needed, but thanks to codewithsadee, I got helped.
Community feedback
- @majid-techPosted about 1 month ago
It was well structured and I have learnt from it.
1 - @Vishnuprasad-94Posted about 1 month ago
Looks great!
I'm just done learning CSS basics and some JavaScript. I was able to learn some of the more advanced stuff looking at your code.
I'm leaving this feedback here as a part of my learning path here on Frontend Mentor.
The Article preview component looks great in portrait and landscape view. However I did notice that since the '.share-option' element, since it's absolutely positioned, gets masked on the right side when resizing to tablet size.
One easy fix that came to mind was to make the element appear vertical for tablets (min-width: 769px, max-width: 875px), thereby making it fit within the main card element and thus visible at every screen size.
Here are some changes I experimented with:
@media screen and (max-width: 875px) and (min-width: 769px) {
.share-option { flex-direction: column; padding: 17px 12px; }
.share-option span { margin-right: 0; letter-spacing: 3px; } }
If there is any other way of fixing it while keeping the share option element horizontal, I'd love to know. Cheers!
0@m-abubakr1Posted about 1 month ago@Vishnuprasad-94 I'm having trouble understanding your point. Are you suggesting that the
.share-option
should be placed inside the card instead of extending almost halfway outside? According to the challenge design, that's how it should be—with only the mobile view to have a different active state.Please let me know if I've misunderstood your comment.
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