Design comparison
Solution retrospective
Since this is my first ever challenge - and real world project - any feedback is invaluable. I struggled a lot and jumped through a ton of hoops to get to this final design, and I know it's not super close to the design, I also couldn't get mobile to work at all.
That said, I wanted to learn what I could have done better in structuring my file and getting the components right, specially to get mobile working.
Community feedback
- @chri55Posted about 4 years ago
Hey Rodrigo, Very nice solution. You've matched the desktop design very closely. For mobile, I would recommend using flexbox ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) on the bottom 2 containers, coupled with media queries, so that once the screen is small enough, the containers will stack into a column shape. I also think using a bold font weight on the sign up button would increase contrast and make it easier to see. Well done, and happy coding!
2@rodrcastroPosted about 4 years ago@chri55 Hey! Thank you so much for your feedback :) Although I'm confused with what you mentioned regarding flexbox. I thought I was using it - and have it active on two of the classes at least. Should I add the display: flex property on those as well?
And I'll definitely take into consideration the weight for the sign-up button and add it! Again, thank you very much :)
0@chri55Posted about 4 years ago@rodrcastro Yes you're right. apologies, I meant to specify you should change the display of .lower to be flex with direction of column when the screen size gets too small to hold the row type containers, using a media query for max width of around 850px, as below that screen width, the lower container starts to break.
1@rodrcastroPosted about 4 years ago@chri55 Hey! Forgot to reply here, thank you for the tip! It worked out just fine, had a hard time working the layout to get it the lower container to a column but got it working eventually.
The only thing still bugging me here and that I couldn't quite figure out is the text that overlaps when you start getting to smaller screen sizes. The top container works just fine and adjusts perfectly, the lower one not so much. I'll move on from this to try other things and maybe from other projects I'm able to get the answer to this. Thank you again 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