3 Column Preview Card using grid, flexbox, Next.js, styled-components
Design comparison
Solution retrospective
I wanted to try styled-components but I'm not fond of the CSS-in-JS approach.
I'm not sure I nailed the responsive aspect, it looks maybe a little weird around 700px, just before it switches to mobile design.
I also changed the breakpoint to an arbitrary value: 600px, is this correct or should I try to make it fit into more standard breakpoints like 640px, 768px etc?
Is there something I can do to improve the responsiveness?
Community feedback
- @brian7homasPosted 11 months ago
Hello Davide,
Styled components do take some getting used to.
One thing I would suggest is to use a function for your media queries, with styled components it becomes easier to add “logic” to your styles.
I’ve normally stuck to standard breakpoints and have used a tool called Responsivly to help decide what breaks to include.
I do a pretty basic version of using functions to return media queries in my Responsive dashboard solution
Hope that helps
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