Responsive layout using HTML / CSS.

Community feedback

• 

  

  Emmilie Estabillo•5,580

  @emestabillo

  Posted almost 3 years ago

  Hey Petru, good work here. For your question, I don't see a nav for this particular design, so I'm assuming the issue is setting an explicit height for the mobile view. If you remove the heights set for main_container and testimonials, the content will naturally stack, just like the mobile design.

  A few more thoughts:

  1. Use mobile-first for CSS. It's easier to scale up your contents than make large elements fit into smaller screens.
  2. I would remove the height and width styles for the html and body. You don't need them for this particular design. Let the content dictate the dimensions of the project.
  3. The layout looks really squished at 376px. Adjust the breakpoint so that it breaks into desktop view at an appropriate screen width, around 992px or above.
  4. main_container doesn't need a huge margin around it. Center the element with margin-inline: auto. It also doesn't need grid. It's children are div and section - both are display: block by default (will span the entire row) and will therefore stack.
  5. Add a README.md for us to get a peek at your process.

  There's a bit more to unpack here but I think more practice with flexbox and grid will help you improve on your next project. Hope this helps! :-)

  01

  Marked as helpful