Responsive landing page using CSS flex and grid layout

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Haleemat, well done completing your second challenge! I think you (and your friends) did a good job here; you basically got almost everything, and I really don't think there's a lot you need to change to make it better. I'd only change these few things:

  1. Instead of using a percentage fixed width (e.g., width: 50%) for your main container, try a max-width instead (you can also try width: min() once you're more comfortable with max-width). The problem with using a percentage width is, things can look really odd on big screens and small screens.

  2. I see you using a star selector at the top of your CSS, which is a good start! I suggest using some CSS reset rules or a normalize style sheet to remove the browser's default styles first. One important reset/normalize rule I would add here is the one for images because you're using an image.

  3. Lastly, great job using grid for centering everything! The only two things I'd change are the place-items property, which should be place-content: center, and I'd change the height to min-height: 100vh.

  Altogether it looks like this:

  * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
  }
  // image reset rule
  img, svg, picture {
     max-width: 100%;
     display: block;
  }
  
  // centering in body selector
  body {
     display: grid;
     min-height: 100vh;
     place-content: center;
  }
  
  // for desktop view
  .container {
     display: flex;
     flex-wrap: wrap;
     max-width: 600px;
  }
  
  // for mobile view
  @media screen and (max-width: 600px) {
     .container {
        max-width: 450px;
        margin: 2rem 1rem;  // 1rem side margin added so that card sides won't touch browser
        flex-direction: column;
      }
  }
  

  Hope this helps a bit, and keep practicing, you're doing great 🙂

  Marked as helpful

  0

  ---

  

  Haleemat Lukaman•20

  @LittLotusPosted about 2 years ago

  @elaineleung thanks so much for the feedback. I'd make adjustment to the code base on your suggestions.💖

  0