Article preview component solution using Flexbox
Design comparison
Solution retrospective
The padding and margins inside the article-card__content is a little bit messy in full screen desktops. I need to set better proportions on the measurements, but i think that is ok for now. The biggest problem is that so far I haven't been able to make a functional share button, because I'm still learning javascript and the way this button is modeled is kind of confusing for me.
Community feedback
- @savvystriderPosted over 1 year ago
I think it looks really good!
My comments, hope you find them useful:
- If you're worried about margin/padding, h1 and p elements naturally have some default margin on them.
- You can set the margin on them to "0" initially to figure out how you actually want to style the content.
- For the share button, you can import an icon from Font Awesome or Material. It'll save you some time.
- Also, I'd recommend changing the text to be left-aligned instead of justified. Easier to read and less of an accessibility issue.
Marked as helpful1@henrikkudesuPosted over 1 year ago@savvystrider Thanks for your reply! Im gonna take a look at it, but perhaps the text is already set to align on left. All i need to do now is learn how to design the share button popup and make it work. which i think this isn't a hard thing to do.
1
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