Responsive 3 Column Preview card using Flexbox

Hi Aviral Sharma!

• "I'd love to know if I have written clean code and written which was not required."

One of the ways to write clean and understandable CSS code is to apply the BEM naming convention.

For example, in your CSS styling, when a person reads ".card1", ".card2" etc, they may not know which card you are referring to. So to make it easily understandable, you can do.

".card--sedan", ".button--suvs"

You can read more about it here: https://css-tricks.com/bem-101/

Hi Aviral Sharma! Congrats on your achievement to complete this challenge

Before the answer,you could read about css shorthand on border radius and @media screen rule in https://www.w3schools.com/cssref/css3_pr_border-radius.php and https://www.w3schools.com/cssref/css3_pr_mediaquery.php First,to change the border radius as screen size changes,you need to know which border you want to change. You can use this on your code @media all and (max-width: 600px) { .card1{ border-radius: 10px 10px 0px 0px; } .card2{ border-radius: 0 0 0 0; } .card3{ border-radius: 0 0 10px 10px; } }

And then,you can delete @media all and (max-width: 1023px).

Is there any question,please ask and correct me if im wrong Thank You!

Hi Aviral Sharma, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

Example:

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column; // just if the body has two child
    justify-content: center;
    min-height: 100vh;
}

The rest is great!

I hope it helps... 👍

Implement a Mobile First approach 📱 > 🖥

With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

-this feedback was from a developer but I want to share how to think when you start your next project