Responsive Four Card Section

Community feedback

• 

  Darek•140

  @DarekReposPosted 7 months ago

  Greetings, You did great job! I'd like to suggest one small improvement.

  If you want the text "Our Artificial Intelligence..." to be wrapped under the heading and displayed on two rows instead of one, you can use max-width.

  @media (min-width: 576px) {
    .content-info {
      max-width: 50%;
    }
  }
  

  I hope you find this helpful. Keep coding (and happy coding too!)

  Marked as helpful

  0
• 

  P

  Martin Mwaka•390

  @TemceoPosted 7 months ago

  Good effort. A few areas for potential improvement.

  1. Avoid using inline CSS as it can be difficult to maintain. For the card borders you can an extra class for each card - eg for the first card - ''' class="card supervisor" ''' in the html and then in the styles page set the top border colour using ".supervisor"

  2. I recommend having an interim media query at about 700px where you can have 2 cards per row and then at the 1200px break out into the desktop design. Below is an example using grid:

  @media (min-width: 700px) {
    .container {
      display: grid;
      gap: 2rem;
      grid-template-areas:
        "one two "
        "three four";
    }
  
    .card {
      max-width: 340px;
    }
  
    .card:nth-child(1) {
      grid-area: one;
    }
  
    .card:nth-child(2) {
      grid-area: two;
    }
  
    .card:nth-child(3) {
      grid-area: three;
    }
  
    .card:nth-child(4) {
      grid-area: four;
    }
  }
  
  @media (min-width: 1200px) {
    .container {
      grid-template-areas:
        "... two ..."
        "one two four"
        "one three four"
        "... three ...";
    }
  }
  

  Marked as helpful

  0