3-column preview card component

Community feedback

• Account deleted

  Looks good you got the design down to a t.

  My first suggestion, is to be able to center something on the page is in the body like this,

  body {
      display: grid;
      place-items: center;
      min-height: 100svh;
  }
  

  My second is to reset padding, margin and set the box-sizing to border-box like this.

  * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
  }
  

  As for the media queiries, have your container set to flex, and in the media queiry set it like to flex-col, like this,

  .container {
      display: flex;
  }
  
  @media (max-width: 40rem) {
      .container {
          flex-direction: column;
      }
  }
  

  Also setting images, svgs and buttons to display block helps with styling aswell. And as a last note seperate your css from your html like this,

  files
  >index.html
  >style.css
  
  

  Hope this helps and if you are unsure on anything else, ill be happy to help.

  Marked as helpful

  2

  ---

  

  Mia Sarah Barghini•30

  @msbarghiniPosted 10 months ago

  @Benjihunt97

  Thanks so much for the detailed feedback! I'll play around with the code and make the changes.

  Just a quick one, for a simple layout like this, why did you suggest Grid over Flexbox? I picked flexbox because it's supposed to be a 1D design. Is there a better way to choose?

  Also, why chose rem instead of px for sizing (media queries).

  Can't wait to get back to it, thank you!!!

  0
• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 10 months ago

  Hello @msbarghini!

  Your solution looks great!

  I have a suggestion for improvement:

  • For semantic reasons, use <main> to wrap the main content instead of a <div>.

  📌 This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  Mia Sarah Barghini•30

  @msbarghiniPosted 10 months ago

  @danielmrz-dev

  That's great to know, thank you!!!

  0
• Account deleted

  I will also add this link here for you too look at. Its the submission and I've done with with pure HTML and CSS. To try and help you understande on hwo to structure your code, how to preset your css, and hopefully your'll find some tricks you can learn.

  My iCodeThis profile

  Marked as helpful

  0

  ---

  

  Mia Sarah Barghini•30

  @msbarghiniPosted 10 months ago

  @Benjihunt97

  This is great thank you!

  0