Four Card Feature

Community feedback

• 

  IO•690

  @i000oPosted 4 months ago

  1. Instead of <div> for each card, you can use the <section> tag, this would be more semantic and better practice.

  2. Look into CSS resets online. There's the Border box fix that you'll likely want to include to make your margins easier to use.

  Here's the code snippet to do this, but the article I've linked explains in more detail what it does.

  /* apply a natural box layout model to all elements, but allowing components to change */
  html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  

  3. Your code could be more efficient, particularly in the media queries. Here are some snippets of mine to demonstrate:

  @media screen and (min-width: 1024px) {
  main {
          display: grid; 
          place-content: center
          grid-template-columns: repeat(3, 1fr);
          max-width: 60vw;
      }
  
      section.L-column {
          grid-column: 1;
      }
  
      section.mid-column {
          grid-column: 2;
      }
  
      section.R-column {
          grid-column: 3;
      }
  }
  
  @media screen and (min-width: 1025px) {
  
      main {
          grid-template-columns: repeat(7, 1fr);
      }
  
      section.L-column {
          grid-column: 3;
      }
  
      section.mid-column {
          grid-column: 4;
      }
  
      section.R-column {
          grid-column: 5;
      }
  }
  

  I hope this is helpful! Keep going!

  0
• 

  SydsBike•210

  @SydsBikePosted 4 months ago

  Well done!

  0