Responsive page using CSS

Community feedback

• 

  P

  Ahmed Lemssiah•410

  @ArtequePosted 8 months ago

  Hello Tolulope Oluwabukunmi,

  First and foremost, congratulations on completing your challenge! 😊

  In your code, you've already used media queries in the right way, I think. The idea is not to use Media Queries for everything. Most of the time, it means that your HTML structure needs improvement. Block-level DOM elements like divs, sections, headers, paragraphs, and headings are by default taking up all the device width. That's why, and you did it right, I think, we start with mobile-first when we code web apps. The breakpoints are to be used when your layout breaks in the browser: for example, when images are way too big and blurry, or paragraph tags are way too large and hard to read for the users.

  • Now onto your form :D

  The fact that you used flex-direction: column in style.css line 58 has rotated the axis of your flexbox. That means that align-items is affecting the "X" axis now - normally the "justify-content" would do that. In this case, I would write my code like this:

  .form { display: flex; /* flex-direction: column; / / align-items: center; */ justify-content: center; margin-top: 1.5rem; margin-bottom: 0; padding-bottom: 0; }

  And for the desktop view (in your case):

  @media screen and (min-width: *****px){ .form { justify-content: unset; } }

  I hope this helps a little bit 😊.

  My advice is to take more time at the beginning of your coding by analyzing your design carefully and thinking about which HTML structure is the best to use to recreate the current fraction of your design system, and how you are going to make the transition between mobile design to tablet to desktop. The best advice is to try and try again, though.

  Marked as helpful

  0

  ---

  

  Tolulope Oluwabukunmi•240

  @TheTreeveloperPosted 8 months ago

  Thank you very much, this was really really helpful! I will be sure to keep practicing, once again, thank you so much!@Arteque

  0