My solution to the Card Component challenge using responsive design
Design comparison
Solution retrospective
Hello everybody! 👋🏼 Here it is my second proyect! There most be tons of things to improve but i would like to start by asking if anyone can tell me if it is a bad practice to place items with position absolut/relative and then using top/right/left, etc. It kind of feels like cheating, is there a better way? Any other feedback is always welcome. Thank you very much 💙
Community feedback
- @finkenmannPosted almost 2 years ago
Try to avoid pixel specifications in general. Use % to keep your elements dynamic. Your layout won't work below 620px, but should shrink further to display mobile views correctly. Use a max-width to stop growing your container. Or even better width: min(90vw, 800px). More about: https://www.youtube.com/watch?v=U9VF-4euyRo .main is somehow superfluous. Use the main tag for .main-container. Never use fixed heights. If an element needs more space in height, it must be able to grow. Set your img to min-width: 100% and leave out the height. Define the width the image should take in its parent element. .text does not need display flex. The normal behavior of the block elements already does what it should. Add flex only at your mediaquery for the two-column layout. Try to make your design mobile first. There are many sources on the internet that explain this.
Translated with www.DeepL.com/Translator (free version)
1
Please log in to post a comment
Log in with GitHub
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