Testimonials Grid Section

Community feedback

• 

  Md5 dalton•1,430

  @md5daltonPosted about 2 years ago

  Hello Guilherme Lopes 👋

  Congratulations on finishing this challenge. Impressive work 👍

  ☝️ Mobile First

  You may have heard of this before but if not, this just means creating a layout where the default configuration is for narrow screen/mobile devices, and layout features for wider viewports are then layered on top of that default.

  To address your question, we will not be creating media queries for mobile since in mobile first approach, we assume that all your default styles are targeted to mobile screen sizes, then we are going to create media queries to define styles for bigger screen devices. Below are some examples I've used and please note that you can modify the breakpoints to meet your project design.

  .container {
      display: grid;
      ...
  }
  
  
  /* Tablets */
  @media (min-width: 576px) {
      .container {
          grid-template-columns: 1fr 1fr;
          ...
      }
  }
  
  /* Desktops */
  @media (min-width: 1024px) {
      .container {
          grid-template-columns: repeat(4, 1fr);
          ...
      }
  }
  

  This is just an example and you may have noticed that I used min-width instead of max-width; this is a typical pattern in mobile first approach.

  Cheers👌

  Marked as helpful

  0

  ---

  

  Guilherme Lopes•350

  @gguilhermelopesPosted about 2 years ago

  @md5dalton Thanks for the tips! In my next challenge I'll try to use Mobile First. See ya!

  1