3-column preview card component solution using html and css

Community feedback

• Account deleted

  Hi, your solution looks ok, but there's some things that need to be changed... so I gave your code some touch ups;

  • I removed a lot of things from overall-container as they weren't needed and I ended up with this;

  .overall-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
  }
  
  

  • You shouldn't have put it in position : absolute as that takes the element out of the document flow... position : absolute should be avoided at all times unless you really need to use it.

  • & Flexbox centers it nicely so all that top, left position isn't necessary.

  • & with the cards, you could have just summed all of them up and gave them the same styling collectively instead of writing the same style for each and every card, so I did these changes;

  .sedan, .suv, .luxury {
    background-color:	#e38826;
    width: 250px;
    height: 300px;
    padding: 50px 20px 80px 20px;
    border-radius: 5px 0 0 5px;
    position: relative;
  }
  
  .suv {
    background-color: #006970;
    border-radius: 0;
  }
  
  .luxury {
    background-color: #004241;
    border-radius: 0 5px 5px 0;
  }
  
  

  • Next time to make it a whole lot cleaner you can give them the same class... this is a whole lot better because you write less, for more.

  You must also make it responsive because it currently isn't... I'll leave all that to you, it shouldn't be hard.

  Keep coding👍.

  Marked as helpful

  0

  ---

  

  vasileios•30

  @vasilisalmpanisPosted about 3 years ago

  @thulanigamtee Thank you so much for the reply. I dont know how to use flexbox thats why i avoided it but I promise i will look into it. Thanks for cleaning up my code and telling me that i can call multiple classes with a comma as I didnt know that as well. When you say responsive what do you mean? Can you elaborate on that? Because I dont understand all the terms. Thank you in advance.

  0

  Account deleted

  @vasilisalmpanis You can check out this course FreecodeCamp it'll get you up and running with everything regarding css. Also shows you how to do responsive designs, flexbox and everything in between.

  0

  

  vasileios•30

  @vasilisalmpanisPosted about 3 years ago

  @thulanigamtee I cant thank you enough. I searched up flexbox and implemented it in my page and it solved the problem with my pages height. Thank you for citing sources. just yesterday i was looking into that course and ill start it after i finish HTML5 on sololearn. Do you think i should take a different approach?

  0

  Account deleted

  @vasilisalmpanis No, just finish with whatever you have going on right now, but for me FreeCodeCamp is what I started with.

  Marked as helpful

  0