@yohannesburpSubmitted about 3 years ago
Hi again 👋. This is my fourth challenge. Feedbacks are appreciated. Thank you.
Brett
@blpetersAll comments
- @blpetersPosted about 3 years ago
Hey - The visuals look perfect, great job. I would think about adjusting your media query pixel cutoffs. Unless I zoomed out in the browser, I was unable to see the desktop version on my medium-sized laptop screen, which is around 1200px wide. Also, If I change the screen to less than 375px, it reverts back to a horizontal layout that is not optimal for a mobile screen.
Marked as helpful1 - @phoenix-mkaySubmitted about 3 years ago
Any feedback and suggestions on how I can improve are very welcome!
@blpetersPosted about 3 years agoGreat job - the spacing on all the content looks really nice. The only things I would note: -The card is showing up too tall on my desktop fullscreen browser view. I had to zoom out on the browser view to see the entire thing. -Missing a border radius on the bottom two corners - You can add that to the .text-content section. -I would add box-shadow to the .blue-btn and .center-content classes to add some depth to the card.
Marked as helpful0 - @naveen570Submitted about 3 years ago
would like to hear what are the things I need to improve on
@blpetersPosted about 3 years agoI really love the transition animation on the accordion and the fact that it matches up with the arrow turning to flip upside down - that looks really good.
I did have some issues with my display on Firefox and Chrome where the card is extending too far past the bottom of the purple container background. I had to zoom out to 80% to get the display correct, so you may want to look at those settings.
Marked as helpful0 - @BestobuddoSubmitted about 3 years ago
Hello again!! if you want, you can look my code and give me some advice or feedback, ill appreciate it so much!
Thank u for read my very bad english, I am from Chile.
@blpetersPosted about 3 years agoGreat looking solution! I was testing out the responsiveness for the mobile version in Firefox, and I noticed that the media query cutoff of (max-width: 375px) was too low to trigger the mobile versions for many mobile phone screens. I would suggest possibly adjusting the max-width in the media query to work for a larger number of devices.
0 - @mcclellanggSubmitted about 3 years ago
For the life of me could not figure out why the background color is so light, any tips on that would be great.
Also is there a better way to get the image to overlap the two flex items it is between other than using absolute/relative positioning?
@blpetersPosted about 3 years agoIt looks like you may need to apply a background-color to your .main class in CSS. This should add a solid layer of color on top of the .svg image on the background and should "darken" the background. The correct color should be listed in the style guide. I hope this helps
1
