Design comparison
Solution retrospective
I tried to think responsively, but it seems I have made some mistakes, again :/
Community feedback
- @janegcaPosted almost 4 years ago
Hi Tamarchika, your design for the desktop size is quite well done. The trick with responsive design is to
(a) plan out which visible items will need grouping for the larger design and structure your HTML accordingly (b) start writing the design for the mobile first, once that is working (c) add progressive enhancements and/or media queries to get it working in the larger screen sizes
Although I find myself constantly flipping between the two each time I complete a new component (don't like being surprised at the end). Check out Kevin Powell's Responsive Design Made Easy video and/or other videos on his site, find he usually explains things pretty clearly.
Noticed your background graphic is a bit misplaced. Instead of sizing it with
auto
, try using the (x,y) positioning: you want the full width (100%) but only half the height (50%). Then for position you want it stuck to the bottom (0%) and the full width or all the way to the right (100%).Hope that's of some help. Happy coding 😄
1@TamarchikaPosted over 3 years ago@janegca thanks very much ! I ll try to use ur tips for the next time.. good luck!
0
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