Responsive component using flexbox
Design comparison
Solution retrospective
Hey Folks, I've just finished my third project, and I'd really appreciate any feedback to help me improve my code. I didn't use bootstrap or other tools like that. I tried to use the concept of Utility First in CSS, but I got confused and had problems with some classes, especially on the @media screen part... So I restarted the code to the normal concept. How can I improve or make my code more advanced... As a newbie, I am open to any other suggestions. Thanks in advance!!!
Community feedback
- @ralvarezrenzoPosted over 2 years ago
Hi monica good job ;). You started doing the styles for desktops, the vh of the main container is smaller than the content you would give it a vh to contain everything you have in 100vh you would increase to 120vh and in the @600px you would put 100vh since it is smaller and also your footer link - attribution will be leaving you a blank space outside the container to that you would give a padding of 0 and it would be fixed, I would recommend using box-sizing in the reset, also study and use the units of measurement rem em px, will help you to the layout faster that concept. Greetings good day. ;)
Marked as helpful1@MonicaDalostoPosted over 2 years ago@ralvarezrenzo Thank you for your feedback.
0 - @mjbagaPosted over 2 years ago
Hi, Monica. Card looks awesome. Nice job.
Tip for media queries, maybe you can look into mobile-first styling. So it's concept where you set your css rules for mobile first, then when there's rules that change as you go higher like tablet and desktop, you do your media queries then. Really helped me a lot in doing responsive designs.
Marked as helpful1@MonicaDalostoPosted over 2 years ago@mjbaga Thanks for your feedback and tip.
0
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