Design comparison
Solution retrospective
I'm still working through how to build responsive sites with appropriate breakpoints. This one felt pretty good until right before the breakpoint of 800px. The buttons seem a little off.
Does anyone have ideas on how to make the buttons responsive as well? I tried to look for strategies to make them scale down slightly when resizing the desktop view but I couldn't find a good solution.
Any feedback is appreciated as always! Happy coding!
Community feedback
- @darryncodesPosted almost 3 years ago
Hi Brandon,
Great solution, well done!
Regarding your question I'd recommend looking into using relative units. In a nut shell you set the font-size of the html element at different break points. You then use rems to size all of your components. Then the components scale according to the relative font size. This YT clip looks like a good place to start to learn
Hope that helps!
Marked as helpful1@walker861Posted almost 3 years ago@darryncodes Thanks for the video suggestion - it was a nice review of the concept. I have been experimenting with ems, rems, perecentages and vw/vh for my layouts to better understand how they can and should be used. Thanks for the feedback, Happy coding!
1 - @anoshaahmedPosted almost 3 years ago
Hey, you can just have your media query start where the buttons start to look messed up to you! Simple solution right? :))
Marked as helpful1@walker861Posted almost 3 years ago@anoshaahmed Thanks for the feedback Anosha. I had been messing with raising my breakpoint which was messing up my vertical / portrait layout. I figured it out after stepping away for a while. I used a max-width on the portrait layout to keep it looking good while having the breakpoint around 900px to keep my desktop layout from becoming a mess. Thanks again! Happy coding!
1
Please log in to post a comment
Log in with GitHubJoin 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