3-column-preview-card-component

Community feedback

• 

  David Osorio•560

  @osoriodevPosted almost 3 years ago

  Hello 👋

  • You have a <div role="main"> , this is unnecessary because there is already a main tag for semantic HTML.
  • In mobile view(375px), the layout is broken. You are using this to center the card in desktop view, but on mobile it doesn't work:

  div:first-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

  You can remove those styles in mobile view and do this:

  div:first-child {
    width: 330px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
  }
  

  • Finally, I suggest you use classes to style the elements, you can try using the BEM methodology.

  1

  ---

  

  Mohamed Muntasir•220

  @devmothegPosted almost 3 years ago

  @osoriodev Thanks for the detailed feedback, really appreciate it! May I ask you what is BEM and how it's helpful?

  0

  

  David Osorio•560

  @osoriodevPosted almost 3 years ago

  @devmotheg BEM is a methodology for naming classes in CSS, it means Block, Element, Modifier. You see, when you have a larger project, you need your code to be scalable and easy to maintain, and BEM helps you get there. This way you can create independent and reusable components.

  If you want to know more about how to implement it, you can visit the website

  Marked as helpful

  0

  

  Mohamed Muntasir•220

  @devmothegPosted almost 3 years ago

  @osoriodev Very helpful, thanks!

  0