Responsive 3 Column Card Component

Community feedback

• 

  Leo•440

  @SouiciaPosted about 2 years ago

  Hello Jacob,

  Congratulation on finishing this design.

  Because there was a lot of possible improvements to your original code, I forked your entire project (which created a repository of your project onto my account), here's the link: https://github.com/Souicia/3-col-car-component-improvement

  Now to answer your specific questions. While @AtulKumar0001 answered correctly on the third question and with good details, I will explain the two first.

  The simplest answer to first question is to simply use height: auto on your .container-sub. This will automatically fit all the content inside the container.

  The answer to your second question is to avoid flex-wrap. Flex-wrap will make the containers jump to a new line if the space of the parent container becomes too small for all of them to fit.

  For the third question, read Atul answer.

  For more improvements, check my fork of your project and compare my code with yours. If you have any questions, please feel free to reply to this message.

  I wish you a great day :)

  Marked as helpful

  2

  ---

  

  Jacob Seymour•50

  @JacwilalaseyPosted about 2 years ago

  @Souicia Thanks Leo, this is really helpful! Much appreciated!

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Jacob Seymour, Congratulations on completing this challenge!

  Two more tips for you =)

  1.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>.

  2.I saw that for some properties you’ve used rem and for others px. In this case it is better to use only one kind of unit to have a better organization for your code. relative units as rem or em that have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.To save your time you can code you whole page using px and then in the end use a VsCode plugin called px to rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Jacob Seymour•50

  @JacwilalaseyPosted about 2 years ago

  @correlucas Thanks Lucas!

  1
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @Jacwilalasey,

  Congrats on completing the challenge

  1. The reason content is overflowing outside the parent container is because you set a fix height height: 500px on mobile you just need to set it to height: auto.

  2. Remove the max-width: 70% on the p element and add the following to have 3 column in a row.

  .flex {
      display: flex;
      max-width: 800px;
      flex-wrap: nowrap;
  }
  

  @media (max-width: 768px) { .container-main.flex { flex-wrap: wrap; } }

  3. you can add the following.

  .container-main.flex {
      border-radius: 20px;
      overflow: hidden;
      padding: 0;
      height:  auto;
  }
  

  you would then have to position the card in the middle you can replace your body rule. body { margin: 1rem; min-height: 100vh; display: flex; justify-content: center; align-items: center; }

  Hope this is helpful.

  Marked as helpful

  1
• 

  Atul kumar•200

  @AtulKumar0001Posted about 2 years ago

  Hey there, @Jacwilalasey If I understand correctly, the answer to your first query, "How can you avoid the overflowing content," is either by reducing the font size and margin or padding you have provided inside your cards, or by simply increasing the size of your cards.

  Your second question is a little unclear to me.

  The third question's response is that you can use the styling listed below if you want to give each of your cards a different border-radius and you have to give each of your cards a different class.

  border-top-left-radius: ;

  border-top-right-radius: ;

  border-bottom-right-radius: ;

  border-bottom-left-radius: ;

  Additionally, you can employ short-hand properties.

  border-radius:(first value for top-left radius) (second value for top right radius) (third value for bottom-right radius) (fourth value for bottom-left radius);

  e.g : bottom-radius: 2px 10px 10px 20px;

  I will give you a link to learn more about border-radius. https://www.w3schools.com/cssref/css3_pr_border-radius.asp I hope this helps you.

  Marked as helpful

  1
• 

  Jacob Seymour•50

  @JacwilalaseyPosted about 2 years ago

  Thanks @Souicia, @hyrongennike & @AtulKumar0001

  All of your responses are extremely helpful!

  2