Responsive 3-column preview card component with HTML5, CSS3, Flexbox..
Solution retrospective
I struggled a bit with the mobile design as I couldn't get the layout to change to a column view....not knowing I had set the display to grid. What I'd like to know is if I have to write codes for almost every breakpoint in these challenges or just one for desktop and one for mobile?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @rymnddev
What really helped me is actually designing layouts for mobile first, and then adjusting as necessary for wider screens. Maybe start your next project with that in mind and see if you notice a difference.
Marked as helpful - @dalnoki
Hey @jcasare,
I'm pretty sure that the current solution belongs to the 3-column preview challenge - but this is a solution for the QR code component, that's why the design comparison behaves like this.
Also, as a general rule of thumb, it's always advised to put your images in an images or assets folder, and also the "Challenge documentation.docx" shouldn't belong to the repo.
As for the breakpoints: you only get the design for a few resolutions (mostly it is desktop, tablet-portrait, tablet-landscape, and mobile) and you need to make sure that your site behaves well on other resolutions too. You need to adjust your breakpoints accordingly. If you check your project on 568px resolution, the buttons slide out of the card, so you need to look for a solution that works on basically every possible resolution.
It's also advised to have a "main" HTML element, for example, instead of the <div class="wrapper">.
I hope this helps, good luck!
Marked as helpful
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