
Responsive web design with flexbox and media queries
Design comparison
Solution retrospective
The project itself was easy, I was able to use both flexbox, media queries for a responsive design. I have used and for enclosing the content within it. I have used id attribute on section called #main and have used a class .first-division. I have created a separate CSS file for styling, called app.css. Both #main and .first-division have a display of flex, #main has a flex-direction of row, while .first-division has flex-direction of column, and have applied justify-content to flex-start. I have provided #main with a padding of 115px on top and bottom to be able to center the .first-division. I have used padding and scale to increase the size as well as to manage white space as per the reference on and . I have also used to positioning to shift content to the top relatively. I have used media queries at 580px, 480px and 375px.
What challenges did you encounter, and how did you overcome them?I was using max-width property but not box-sizing property to control the flow of the content. I remembered to apply it, and it worked better.
What specific areas of your project would you like help with?I believe I come to the same results with more number of steps, maybe i would like examples of how i could have done it differently in a fewer steps, or what could have been more efficient solution.
Community feedback
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