3 column preview card component with flexbox

Community feedback

• 

  Aditya Singh•460

  @adityas24

  Posted over 3 years ago

  Hey Sandesh! great job with this one.

  One mistake i saw is that you are using unnecessary divs in your code. Inside each column you have 4 elements. And for each element you are using a div to contain it. You don't really need to do that.

  Instead of writing

  <div class="col1 box">
          <div class="col1Img">
            <img src="images/icon-sedans.svg" alt="sedansImg">
          </div>
          <div class="col1Title"><h2>Sedans</h2></div>
          <div class="col1Info">
            <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city 
              or on your next road trip.</p>
          </div>
          <div class="col1bottom">
            <button>Learn More</button>
          </div>
        </div>
  

  You could have simply written

        <div class="col1 box">
            <img src="images/icon-sedans.svg" alt="sedansImg">
            <h2>Sedans</h2>
            <p>Choose a sedan for its affordability and excellent fuel economy. Ideal 
                  for cruising in the city or on your next road trip.</p>
            <button>Learn More</button>  
        </div>
  

  Still the code will work fine as every element inside the flexbox becomes a flex item irrespective of that item is inline or block element.

  All the best 🙂👍

  20

  Marked as helpful
• 

  Naveen Gumaste•10,420

  @NaveenGumaste

  Posted over 3 years ago

  Hay ! Good Job you made it look nearly perfect to the preview

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body like it should be your container

  -> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

  -> But use header tag only once in main heading element.

  Keep up the good work!

  10

  Marked as helpful
• 

  Aadvik•1,250

  @Aadv1k

  Posted over 3 years ago

  Hey! Here are some fixes I would suggest you apply on your project.

  • Media query on mobile; You should add a media query for smaller screen sizes as right now it gets messed up, so I would recommend you change the direction of flex to column and make some minor tweaks (spacing, padding etc) to make it look good on mobile.

  10