Kai Pereira
@KaiPereiraAll comments
- @keirapereiraSubmitted 10 months ago@KaiPereiraPosted 10 months ago
You could make the card responsive by slapping on the .main (even though you probably don't need it):
width: 100%; max-width: 250px;
Pls use less id's on your containers :) and a little less padding on your .main
0 - @martinxoSubmitted over 2 years ago
First attempt, not great, used Bootstrap, I need to learn Flexbox, right?
Onwards and upwards!!
@KaiPereiraPosted over 2 years agoGood job Martin!
I would highly suggest learning the bare bones of CSS before you move onto a UI library because it is important to learn the reigns of CSS! If you want a nice course on Flexbox you can learn a gamified style at Flexbox Zombies https://mastery.games/flexboxzombies/
Pretty good job with it though! Keep on staying with it!
Marked as helpful0 - @jpsmenezesSubmitted over 2 years ago
It was a lot of fun doing this challenge, I'm very pleased with the result. now I don't know why the images are not appearing in the layout view here in the frontend mentor, it must be because I inserted the images via css.
Any suggestions on how I can improve are welcome!
@KaiPereiraPosted over 2 years agoGood Job Menezes!
It was really nicely done, a couple of things to note are you should add your light grey background color to the body so it looks nice with the border-radius. Second, you should add an H1 and remember to use your H1's, H2's, H3's and all they way up to H6's. Finally just for some nice looks, you might want to add some longer transitions to your hover effects
Overall, it was really great! Keep on going!
Marked as helpful1 - @Ryan-D-PSubmitted over 2 years ago@KaiPereiraPosted over 2 years ago
Nice job Ryan,
A couple small details are that you can make your box shadow look more clean by making it rgba(0, 0, 0, 0.3) the fourth option is the opacity just to make it less dark. I would suggest putting justify-content: space-around; on your .countries container to make each country go all the way to he edges of the container and still be responsive. Good job though and keep it up!
Marked as helpful1 - @luis5944Submitted over 2 years ago@KaiPereiraPosted over 2 years ago
Hi Elle,
Great job on this hard challenge. Small detail is that the challenge is not responsive for the galaxy fold phone (smallest annoying phone on the planet). Incredible job though this was a hard challenge
0 - @S4sunny-githubSubmitted over 2 years ago
like a pro....
@KaiPereiraPosted over 2 years agoNice job Sunny!
I just wanted to say that your card is not responsive for the galaxy fold phone, probably just forgot that annoying one but good job overall!
Marked as helpful0 - @Bethha-glitchSubmitted over 2 years ago
After I was done with the challenge, I felt like I needed to make the size of each testimonials smaller to fit the page without scrolling. However, I found this challenging as the change in sizes wasn't adjusting how I wanted it to.
@KaiPereiraPosted over 2 years agoNice job Elizabeth!
Just a couple things to optimize your page, the first one is, it is not responsive (it does not work on different screens) I would suggest sharpening your skills with Kevin Powell's course https://courses.kevinpowell.co/conquering-responsive-layouts which is great. The second thing is your background is repeating. To change that set your body to a have a min-height of 100vh (vh = viewport height).
Great work, keep it up :)
0 - @ElyasthrSubmitted over 2 years ago
Really good experience, Have you some advice to Optimise react app performance or good practice ? thanks
@KaiPereiraPosted over 2 years agoInsanely great job @Elyasthr, you should be proud!
A couple of minor suggestions, when searching you can use the .includes to conditionally render the cards if it includes those things instead of containing every exact letter. I would also suggest adding cursor: pointer to elements you should click just to make it more obvious, specifically your Dark Mode/Light Mode button.
Aside from that, such a great job, keep on going!
Marked as helpful1 - @kennbachSubmitted over 2 years ago
Hello Mentors,
Thank you for taking the time to review my project. Please feel free to make any comments and suggestions, as all feedback is welcome.
Cheers!
@KaiPereiraPosted over 2 years agoNice job @kennbach!
Your component is almost fully responsive until you hit around 400px width for your screen which is around the size of the galaxy fold, so just make it responsive when it hits 400px
Keep up the great work though!
Marked as helpful1 - @rule-kellsSubmitted over 2 years ago
Hello community! Feedback and criticism welcomed. I was not sure what to do with the button. I wasn't keen on it just floating into space as the slides changed from one to another. So, I just made it part of the slides! LOL
@KaiPereiraPosted over 2 years agoNice job @rule-kells!!!!!!!
Tiny detail is to just add a cursor: pointer on the arrow icons just so people know when they are hovering over the button part of the icon!
Keep on going though!
1 - @arshGoyalDevSubmitted over 2 years ago
It was a great challenge, I enjoyed it. Hope you like it. Any feedback would be great!
@KaiPereiraPosted over 2 years agoNice job Arsh! I love your loading animation! One small bug I found while playing around with it is when you randomly put something into the URL that is not a country code it just cycles over the loading animation forever.
Keep up the good work though!
Marked as helpful1 - @khalidsalah1522Submitted over 2 years ago
Fun project to make learned a lot some of data lesson, thank big
@KaiPereiraPosted over 2 years agoHi Khalid, Looks awesome! Just a minor thing you may have forgotten was the dragging to re-order the list...
Great job though, Keep up the good work!
Marked as helpful0