3-coulumn-preview

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Miftah Arif, congratulations for your new solution!

  Your solution its almost done and I’ve some tips to help you to improve it:

  Remove the height from the container to keep it growing it automatically and allow the container align center in the mobile version. See your code with the changes below:

  body {
      margin: 0;
      padding: 0;
      /* width: 100vw; */
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: hsl(0, 0%, 95%);
  }
  
  
  @media (max-width: 375px)
  .container {
      display: flex;
      flex-direction: column;
      width: 300px;
  }
  .container {
      display: flex;
      flex-direction: row;
      width: 800px;
      /* height: 400px; */
  }
  

  You made your html structure entirely with div blocks but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use <article> instead of the <div>.

  This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

  ✌️ I hope this helps you and happy coding!

  0