Basic html and css

Community feedback

• 

  Martinsgundi•380

  @MartinsgundiPosted over 1 year ago

  Hey Daniel, nice work!.

  Concerning the length of the paragragh, you should consider giving a max-width value to the .sedan, .suv and .luxury classes. By doing this you would be able to control how wide the cards will be or how long the paragraph will be.

  For example (Gotten from your code):

  .sedan, .suv, .luxury {
      display: flex;
      flex-direction: column;
      padding: 50px;
      max-width: 11rem;  /* I added a max-width of 11rem */ 
      justify-content: flex-start;
  }
  

  I hope this helps, happy coding!

  Marked as helpful

  0
• 

  Hassan•940

  @hnasser44Posted over 1 year ago

  Hello! To achieve a design closer to the desired layout, you can apply the following styles:

  1)For the container, use flexbox to center its contents both horizontally and vertically, and set the margins to auto to keep it centered within its parent container.

  .container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
  }
  

  2)At larger screen sizes, give the container a minimum height of 100vh to ensure it takes up the full viewport height. You can play with the min-width value to find a perfect match

  @media screen and (min-width: 768px) {
      .container {
          min-height: 100vh;
      }
  }
  

  3)For the sedan, suv, and luxury classes, set the maximum width to 200px to limit their size and keep them uniform.

  .sedan, .suv, .luxury {
      max-width: 200px;
  }
  

  Hope you find this helpful. Happy coding :)

  Marked as helpful

  0

  ---

  

  Daniel•50

  @trevisandanielPosted over 1 year ago

  @hnasser44 This was really helpfull, it looks way better now! Thank you!

  0