Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive 3-column preview card component

@aramatsolrac

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


It is the third challenge I have done! :D

I had some issues trying to keep the footer fixed at the bottom. If possible, I would appreciate your feedback about it and what else you see that I can improve!

Anyway, I really appreciate any help you can provide. ☺️

Community feedback

David Dyer 185

@davidbdyer

Posted

Each individual card aren't supposed to have rounded corners. It’s a little distracting that the whole card changes size when you hover over the button. The page is not responsive and breaks on mobile devices.

Your closing div was missing for the div opened on line 19.

Marked as helpful

0

@aramatsolrac

Posted

@davidbdeath Thanks

0
P
David Turner 4,100

@brodiewebdt

Posted

As far as the Footer goes, it doesn't have to stick to the bottom of the screen. If you remove the position: fixed and the left and bottom values. It will be fine. I would also remove the max-height on the Car-Type Div as it is cutting off the content on mobile. Use Chrome DevTools set to Iphone X and you will see what I mean.

You can remove the aria hidden element on your Github link. You only want to use that for things like icon links.

Hope this helps.

Marked as helpful

0

@aramatsolrac

Posted

@brodiewebdt Thanks a lot! :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord