preview card using flexbox + responsive on mobile screens
Design comparison
Solution retrospective
Fun challenge to experiment with flexbox more and making the website responsive on mobile phone. 2 main struggles I had with this one:
- when the screen got smaller horizontaly the buttons got pushed further down outside the frame of their own section.
- the footer pushed the container class to the left of the screen causing it not to be centered anymore,(luckily by using flex-direction column in "body" this solved the issue).
When researching regarding the "button" type, apparently flexbox can´t be used on it. Any advice how to tackle this one is welcoming. i saw you could also use grid for this. My default answer was using position absolute :).
Any other advice or tips are most appreciated!
Community feedback
- @NiklausRupailPosted about 2 years ago
Congrats on finishing the challenge! To fix button problem you should set the max-width property on paragraphs so they don't scale that much when changing viewport. Also you can delete that footer because it's not in the design and set background-color to the color in style-guide.md!
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