Responsive Four Card Section

Community feedback

• 

  KapteynUniverse•2,150

  @KapteynUniversePosted about 9 hours ago

  Hey Abigail,

  You can do it with flex. Just wrap team builder and karma with a div, apply flex to the main and change flex-direction with a media query.

  For the media queries, i think it is possible to do this challenge without any media query with using grid, i recently changed my solution from flex to grid. I was so close to do it without a media query

  There are other issues to be addressed tho:

  I think you can remove contentWrapper div and apply padding to the body.

  I think you mixed up header with heading

  margin: 1rem 31rem 0 31rem; on h3 is too much. You can use max-width: 60ch; to get around the same width, or max-width: 30rem; and margin-inline: auto; to make it centered. Look here for the css units

  You can add flex or grid to body so header and main will be centered too, no need all of that big margings

  body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  

  Remove marging left and right from the main after this. They are shrinking the main a lot around 900px.

  Lastly you don't have to use media query at 376px because design image is 375px. Change the layout whenever you feel is good, you can even add a tablet layout too. So after all of this changes, i think you can change to mobile or desktop at 768px @media (min-width: 768px)

  0
• 

  Mohamed Ragheb•130

  @mohamed-fmPosted about 17 hours ago

  You really did a good job , keep it this way <3

  0