@yohannesburp
Latest solutions
Latest comments
- @blpeters
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 helpful - @phoenix-mkay@blpeters
Great 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 helpful - @naveen570@blpeters
I 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 helpful - @Bestobuddo@blpeters
Great 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.
- @mcclellangg@blpeters
It 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
