Can you please review?
Jonathan Kila
@Excelsior2021All comments
- @RaniaAwnySubmitted over 1 year ago@Excelsior2021Posted over 1 year ago
Hi @ RaniaAwny,
Well done for completing the challenge.
I think you've done a good job! Nothing to report!
0 - @Denaro13Submitted over 1 year ago
During the challenge, I found it difficult at some point to set a fixed layout without the card increasing in size as the screen size increases. I will like to know the best width and height to apply to achieve this. Though I was able to figure it out but I will still like to hear from someone here. Thank you.
@Excelsior2021Posted over 1 year agoHi Usman,
I don't know if I understand correctly. Are you trying to stop child elements overflowing the parent?
If so, you can set
max-width: fit-content
andmax-height: fit-content
This way the the child elements will not overflow the parent.
Marked as helpful0 - @Shelton-RolleSubmitted over 1 year ago
Open to any and all feedback! I'm not 100% confident in my responsiveness for this project so I'd love to know how I could improve.
@Excelsior2021Posted over 1 year agoHi @Kila,
You have my surname as your username! 😮
Well done for completing the challenge.
Just a few things I noticed:
- The font is not being applied to all of the text in the preview site
- For both the mobile and desktop views, try to add some margin/padding at the bottom of the page for UI.
- The mobile menu, when you scroll down it the menu goes with it, maybe you can try to implement a way for it not to scroll at all when the menu is open?
- At a certain breakpoint for the desktop view, the main image no longer lines up with the rest of the content. Something else to fix?
Apart from that, good job!
0 - @GeorgenicoSubmitted over 1 year ago
Hi there, the only problem I want to know is why I can't move the icon from the button. I tried position: relative and right: 5px; but when you inspect it, it says the position is static. Please help thank you!
@Excelsior2021Posted over 1 year agoHi @Georgenico,
Well done for completing the challenge.
I would say try adding the "icon" class to the <svg> opening tag instead of the <path /> tag.
0 - @NikitossikSubmitted over 1 year ago
The main chalenge of the project was to position the hero image properly. Because the image is trimmed differently for different screen sizes, but somehow I managed to do it)
Making hover effects for buttons was pretty time consuming, because
transition
didn't work forlinear-gradient
, so I used a trick with pseudo-elementAlso I used CSS
min
function to make elements more responsive based on the viewport width andclamp
to make responsive typography. But, these functions are not supported yet in some browsers. What are the best practises of doing this kind of things like squishy paddings, margins, fluid typography so it would be as much responsive and cross-browser as possible? What should I add to my code?@Excelsior2021Posted over 1 year agoHi @Nikitossik,
Well done for completing the challenge. I also struggled with the hero image.
For the buttons with linear gradients. What I did was use the opacity property and set it to 0.5 on hover, I believe it gives the effect that we want.
Marked as helpful0 - @Zaratosh13Submitted over 2 years ago
1- I found it easy but using some of my own resorce would be better. 2- The picture intrigation part i felt confusing but pratice will make me perfect. 3- Yes best pratice will be letting other use there images and design because that will promote a creative mindset.
@Excelsior2021Posted over 2 years agoGood job!
Interesting solution to how to implemented the change of the images from desktop to mobile. This is a solution I will explore as I struggled with this also.
Marked as helpful0 - @Galeanas93Submitted over 2 years ago
Feedback would be greatly appreciated:)
@Excelsior2021Posted over 2 years agoHey,
Good job, looking good!
Few things I have noticed:
- You have to click the rating twice before it is highlighted.
- When you click the submit button without selecting a rating, it still goes to the confirmation card.
Try to see if you can fix those issues. Also, maybe add a min-width for the main component. When I reduce the viewport to a certain point, the design breaks. Good luck!
0 - @khaleed2002Submitted over 2 years ago@Excelsior2021Posted over 2 years ago
Hey Khaled,
Good job! A few things I noticed:
-
When I select a number the previous number is highlighted grey whilst the selected number is highlighted orange.
-
When the screen is resized, the elements are all over the place.
See if you can fix these issues. Good luck!
Marked as helpful1 -