Mobile First - Testimonials Grid Section

Community feedback

• 

  P

  Stephen Ostler•210

  @steveostlerPosted 5 months ago

  The cards do not stack on top on one another in mobile view. I found it easier to build it mobile first with 5 boxes stacked . Then do a media query with a min-width to change to grid view at larger screen size, setting columns and rows for each box in that media query

  @media(min-width:1030px){
     
      main {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: auto auto;
          gap: 20px;
          max-width: 1100px; /* Adjust the gap size as needed */
        }
      .card{
          width: auto;
          margin-bottom: 0 ;
      }
      .box1 {
      grid-column-start: 1;
      grid-column-end: 3; 
      background-position: right 50px top; 
      }
      .box3 {
      grid-row-start: 2;
      }
      .box4{
      grid-row-start: 2;
      grid-column-start: 2;
      grid-column-end: 4;
      }
      .box5{
      grid-row-start: 1;
      grid-row-end: 3;
      }
  

  0