Design comparison
Solution retrospective
Hello, Frontend Mentor community! This is my solution to the Article preview component.
I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
Community feedback
- @vishwa3Posted about 2 years ago
Loved your solution - I was facing challenge to get the mobile view correct especially for the share section which sits at the bottom for mobile view - referred to your solution for the same - also liked how you have added click EventListener on the entire document to close the share modal when clicked anywhere on the screen
0@catherineisonlinePosted about 2 years ago@vishwa3 awesome if that helped! Keep it up! 🙌🏻
1 - @mastertbalPosted over 2 years ago
Very awesome work. Kudos!
0 - @Salman-sajibPosted over 2 years ago
Picture perfect.
0 - @olabisi09Posted over 2 years ago
Great job! You've inspired me to take on more challenging projects here.
0 - @wahyufaturrizkyPosted over 2 years ago
Great work @catherineisonline,
Maybe some advice for increasing your accessibility web by reading this article https://medium.com/swlh/all-we-need-to-know-about-web-accessibility-8d0957208f
don't forget to hit button "remark helpful" cheers :)
0 - @darkweb907Posted over 2 years ago
Nice project from a genius
0 - @rafaelvieiracostaPosted over 2 years ago
Good job! ✨
The way you centered it works for screens with 1440px but when you put it on a bigger screen it ends up breaking, and your article ends up expanding too much. If you want to test, one way to solve these problems would be the following:
- To ensure perfect alignment on all screens, we can use the display flex, so just remove ALL the
marginfrom your.article-containerand add the following code to your main tag:
main{ display: flex; justify-items: center; align-items: center; min-height: 100vh; }- And to prevent the
.article-containerfrom expanding, just put a max-width on it:
.article-container{ max-width:720px; }If you only have a 1440px screen, you can test other sizes using your browser's DevTools
0@catherineisonlinePosted over 2 years ago@rafaelvieiracosta I will give it a try, thanks!
0 - To ensure perfect alignment on all screens, we can use the display flex, so just remove ALL the
- @ljmarket13Posted over 2 years ago
Looks great!
0 - @imadvvPosted over 2 years ago
hey Catherine , I take a look to your code is very clean and easy to understood, however you may want to take look at CSS max() function for the width property, it's really helpful and you may not need to use media query at all in small component. have a good day and happy coding :)
0 - @DanteiePosted over 2 years ago
wow I like your code and solutions. I learn so much from you.
0 - @jgengo-altPosted over 2 years ago
It seems you just edited it, because I got to see "test" everywhere in the page and the layout is broken :'(
0@catherineisonlinePosted over 2 years ago@jgengo-alt Yes, had to change something, should be working now! ^^
0Account deleted@catherineisonline you are fast!
as usual, you use pixelperfect marvelously! you did an awesome job.
my only feedback would be probably to change your mobile layout around 1150px instead of 1030px, just to make it look more appealing to the eye. Also, using width: 50% on your article make it huge for big screen :D
0@catherineisonlinePosted over 2 years ago@jgengo Thanks for the feedback. Making it responsive is always annoying for me! :D
0Account deleted@catherineisonline ahah :) I can imagine! I find a nice trick that work for example for my latest deployment where I'm using something like this on the line 44
https://github.com/jgengo-alt/jgengo-alt.github.io/blob/main/four-card-feature-section/css/style.css#L44
Marked as helpful1@catherineisonlinePosted over 2 years ago@jgengo I was thinking about this kind of approach, never really dived deeper into this. Definitely would like to learn more now! Thank you!
0
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