@khalilahmad3212
Submitted
it is my first challenge at a front-end mentor. please review my solution and tell me that whether I need to improve it or it is good as it is.
@thesohailjafri
@khalilahmad3212
Submitted
it is my first challenge at a front-end mentor. please review my solution and tell me that whether I need to improve it or it is good as it is.
@thesohailjafri
Posted
Well, Great Work on your first project
You just need to adjust the color of the rating div. it too saturated compared to the og design.
Else everything is Great :]
Marked as helpful
@mauCZ
Submitted
Any feedback or tips about the design or the code will be appreciated.
@thesohailjafri
Posted
GREAT WORK,
here is some feedback for you
else everything is great🙌.
have a good day maucz :]
@AleksandarV91
Submitted
Please feedback
@thesohailjafri
Posted
Great Work,
here are some tips for your solution
else your solution is great🙌
have a nice day :]
Marked as helpful
@AlarconJesus
Submitted
Hi! I'm Jesús Alarcón, I'm new to frontendmentor, and any feedback will be well received.
@thesohailjafri
Posted
Jesus, really great work, I don't have any feedback as such commented here to appreciate your work
@Elioskas
Submitted
I couldn't figure out how to stop "learn more" lines from braking. Any ideas?
@thesohailjafri
Posted
learn more from breaking? I didn't shaw that on the preview.
@Elioskas
Submitted
It's my first attempt at something like this after about a week of learning css and html. Any feedback is appreciated.
@thesohailjafri
Posted
Great Work On Your First Challenge Marko,
I would sugguest you use Figma/adobe XD for mapping the size of elements so that you would get the exact result as of design, your design is quite big compared to the og design.
Mobile responsiveness is missing.
Increase the spread and blur of box-shadow and reduce the alpha of RGBA, something like this: box-shadow: 10px 10px 51px 14px rgba(0,0,0,0.24);
you can use the tool like these to get your box-shadow right:
https://cssgenerator.org/box-shadow-css-generator.html
https://getcssscan.com/css-box-shadow-examples
I Hope These Feedback Helps You :]
Marked as helpful
@NecheyGrace
Submitted
Please give me honest and sincere feedbacks.
@thesohailjafri
Posted
First of all great work on your first challenge .
here are honest and sincere feedbacks as you said for it
add some padding in text like h1 h2.. and p.
add object-fit : cover or contain to an image tag in sponsor section has images are getting squeezed in desktop view.
keep coding and have a nice day:)
@b-l-u-e
Submitted
Feedback! feedback!...
@thesohailjafri
Posted
Try adding cursor pointer on sign-up button (mouse-hover event)
Colors are a bit different in solution and design, there is a style guild available in the provided folder which contains the exact color (HSL color code) that is used in the design.
GREAT WORK, KEEP IT UP ~_~
Marked as helpful
@kpav33
Submitted
Initially I thought the challenge will be quite easy despite being tagged as advanced. But getting the React Router to work properly for each country sub page and particularly to make it so that by clicking on any of the bordering countries takes you to that country sub page, ended up being more difficult than I expected. Additionally I did not realize that custom styling a select field will be as complicated as it ended up being.
I have a question regarding the country flag images on the root page. Not all images are the same size so sometimes, some flags end up having white empty space and don't fit in the div properly. I somewhat fixed this issue by using object-fit: cover CSS property, but this makes some of the flags look weird. I was looking for better solutions, but couldn't find anything on my own. If someone could point me in the direction of how I could solve this problem in a better way, I would appreciate it.
Additionally if anyone would take the time to go over some of my code and could give me some feedback on my code quality I would be grateful.
Thank you for your answers in advance.
@thesohailjafri
Posted
First of all great work on Rest Countries🙌,
You can fix that image white space issue by using 'object-fit: cover' in CSS. Just define the width and height of image-div or img-tag and set object-fit to cover so that the image takes the whole div space.
@yukti-singh
Submitted
When I open the code locally on my system everything works fine, but when I uploaded the code from GitHub all the elements gets messed up. Any suggestions how can I solve this?
@thesohailjafri
Posted
and add font-family in root CSS accordingly example: *{ font-family : Poppins, Arial; }
2)To remove the horizontal scroll bar from the bottom add overflow : ''none" to the body tag.
I hope this fixes the issue you're facing after deploying. Have a good day
Marked as helpful
@bruyss
Submitted
It seems that max-width: 100% on my image is interfering with getting both columns of my flex the same width but removing it makes the image overflow, any ideas?
@thesohailjafri
Posted
Can you please explain the issue you're facing in detail ?? Jeroen