Four-Card Feature Section Using CSS Grid and Flex

Community feedback

• 

  Aakash Verma•9,480

  @skyv26Posted 4 months ago

  Hi @vinayagamRVK,

  👋 I went through your CSS and have a few suggestions to help improve responsiveness, maintainability, and best practices. Let’s dive in! 🚀

  ---

  1️⃣ Avoid Using height Unless Necessary 🛑

  Using the height property can make responsiveness tricky. Instead, let your inner elements dictate the height using padding, margin, or content. It will save you time and effort when adjusting layouts for different devices. 🎯

  ---

  2️⃣ Use position: absolute Only When Truly Needed 🧩

  I noticed you used absolute for the image in the card. While it can sometimes work, it’s better to avoid it unless absolutely necessary. Instead, consider using flexbox or grid for alignment. It’s more robust and easier to maintain. 💡

  3️⃣ Keep It DRY (Don’t Repeat Yourself) 🚿

  Repetitive CSS can make your file bulky and harder to maintain. Consolidating shared styles into reusable classes or variables will streamline your CSS. 🪄

  Example:

  Instead of repeating styles:

  .card-title {
    font-size: 24px;
    color: #333;
  }
  .card-subtitle {
    font-size: 20px;
    color: #333;
  }
  

  Use a shared class:

  .text-large {
    color: #333;
  }
  .card-title {
    font-size: 24px;
  }
  .card-subtitle {
    font-size: 20px;
  }
  

  ---

  Final Refactored CSS Code 🛠️

  Here's the updated CSS file for your project:

  ./* CSS Reset */
  * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }
  
  html,
  body {
      height: 100%;
  }
  
  /* Custom Properties */
  :root {
      --red: hsl(0, 78%, 62%);
      --cyan: hsl(180, 62%, 55%);
      --orange: hsl(34, 97%, 64%);
      --blue: hsl(212, 86%, 64%);
      --darkGrey: hsl(234, 12%, 34%);
      --lightGrey: hsl(229, 6%, 66%);
      --white: hsl(0, 0%, 98%);
  }
  
  body {
      font-family: "Poppins", serif;
      font-weight: 400;
      font-style: normal;
      padding: 40px;
      background-color: hsl(0, 0%, 98%);
  }
  
  .header {
      text-align: center;
      padding: 30px 0px 12px 0px;
  }
  
  .header h2:first-child {
      font-weight: 100;
      font-size: 35px;
      color: var(--darkGrey);
  }
  
  .header .heading-two {
      font-weight: 600;
      margin-top: 3px;
      margin-bottom: 20px;
      color: var(--darkGrey);
      font-size: 38px;
  }
  
  .header>p {
      font-size: 15px;
      font-weight: 200;
      color: var(--lightGrey);
      display: inline-block;
      width: 40%;
      line-height: 24px;
  }
  
  .card-section {
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
  }
  
  @media (min-width: 1024px) {
      .card-section {
          flex-direction: row;
      }
  }
  
  .card-section__supervisor {
      border-top: 5px solid var(--cyan);
  }
  
  .card-section__supervisor>h3 {
      color: var(--darkGrey);
  }
  
  .card-section__supervisor>p {
      color: var(--lightGrey);
      font-size: 15px;
  }
  
  .card-section__middle {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
  }
  
  /* calculator section */
  .calculator {
      border-top: 5px solid var(--blue);
  }
  
  .calculator h3 {
      color: var(--darkGrey);
  }
  
  .calculator>p {
      color: var(--lightGrey);
      font-size: 15px;
      margin-top: 10px;
  }
  
  .card-section__middle .team-builder {
      border-top: 5px solid var(--red);
  
  }
  
  .team-builder>p {
      color: var(--lightGrey);
      font-size: 15px;
      margin-top: 10px;
  }
  
  .team-builder h3 {
      color: var(--darkGrey);
  }
  
  .card_container {
      display: flex;
      flex-direction: column;
      height: max-content;
      border-radius: 10px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      width: 100%;
      max-width: 360px;
      padding: 20px;
  }
  
  .card-image {
      margin-top: 70px;
      width: max-content;
      align-self: flex-end;
  }
  
  .card-section__middle .karma {
      border-top: 5px solid var(--orange);
  }
  
  .card-section__middle .karma p {
      font-size: 15px;
      color: var(--lightGrey);
      margin-top: 10px;
  }
  
  .karma h3 {
      color: var(--darkGrey);
  }
  

  
    <div class="card-section">
      <!--Grid Container-->
  
      <!-- Supervisor Card -->
        <div class="card_container card-section__supervisor">
          <h3>Supervisor</h3>
          <p> Monitors activity to identify project roadblocks</p>
          <img  class="card-image" src="./images/icon-supervisor.svg" alt="Supervisor">
        </div>
  
      <div class="card-section__middle">
        <!--Flex container-->
  
        <div class="card_container team-builder">
          <h3>Team Builder</h3>
          <p>Scans our talent network to create the optimal team for your project</p>
          <img class="card-image" src="./images/icon-team-builder.svg" alt="team-builder-image card" loading="lazy">
        </div>
  
        <div class="card_container karma">
          <h3>Karma</h3>
          <p> Regularly evaluates our talent to ensure quality</p>
          <img  class="card-image" src="./images/icon-karma.svg" alt="karma-image">
        </div>
      </div>
  
        <div class="card_container calculator">
          <h3> Calculator</h3>
          <p> Uses data from past projects to provide better delivery estimates</p>
          <img  class="card-image" src="./images/icon-calculator.svg" alt="calculator-image">
        </div>
  
    </div>
  
  

  ---

  TL;DR Summary:

  • ✅ Let padding/margin decide your height.
  • ✅ Avoid unnecessary position: absolute.
  • ✅ Make your code DRY.

  Great work so far! Keep it up, and you’ll have a beautifully styled project in no time. 🌟 If you have any questions, feel free to reach out. 😊

  Cheers,
  Aakash 🚀

  Marked as helpful

  0

  ---

  

  Vinayagam K•180

  @vinayagamRVKPosted 4 months ago

  @skyv26 Your Feedback means a lot to me Aakash! and definitely I would try to incorporate all the suggestions made by you and I haven't made this responsive yet...I would also try to implement responsiveness.....so could you tell me overall how well is this project and the code...coz I want to Evaluate myself....like how much I am skilled in CSS. Could you provide some feedback about this

  Thank You!

  0

  

  Aakash Verma•9,480

  @skyv26Posted 4 months ago

  Hi,

  I took a look at your code, and I want to share my thoughts. You clearly have a good grasp of the concepts, but it seems like you're just treading water, trying to get by. Please don’t take this the wrong way! What I mean is that while you’ve managed to get to a solution, which is commendable, I think it would benefit you to approach the project more consciously. Take your time to understand the ideas behind it fully.

  Also, consider making your styles modular. This way, you can reuse them instead of rewriting code multiple times, like you did for the cards. Remember, slow and steady wins the race; by pacing yourself, you'll achieve even better results in the long run. Overall, you did a solid job, but being a bit more strategic with your coding will go a long way.

  Marked as helpful

  0

  

  Vinayagam K•180

  @vinayagamRVKPosted 4 months ago

  @skyv26 Thank your for your kind reply! could you provide me some tips on how to improve my CSS skills and could you provide some feedback about my other solutions pls

  1

  

  Aakash Verma•9,480

  @skyv26Posted 4 months ago

  @vinayagamRVK I will look at the other solution sometime today or tomorrow as you can understand it takes time.

  0