Basic CSS with media queries and flexbox

Community feedback

• 

  gmqrk247•90

  @gmqrk247Posted about 2 years ago

  Hey!

  Great work! One little hint, if you put a transparent border on the button on it's normal state, you can avoid the growing and shrinking with the hover effect. just like this:

  .btn{border:2px solid transparent}
  

  Marked as helpful

  0

  ---

  

  Atul kumar•200

  @AtulKumar0001Posted about 2 years ago

  @gmqrk247 I really appreciate your suggestion. It really helped me. I was also wondering why my cards' size was growing and shrinking. Could you tell me why it was happening?

  0

  

  gmqrk247•90

  @gmqrk247Posted about 2 years ago

  @AtulKumar0001 the hover effect border added extra pixels to the button. So on hover, those extra pixels pushed out everything around just by that tiny bit. Adding a transparent border on normal state means those pixels are already there, you just can't see it because it's transparent. But you could have set it to the same color as the background. I hope I've answered your question. Keep up the learning 🙂

  Marked as helpful

  0

  

  Atul kumar•200

  @AtulKumar0001Posted about 2 years ago

  @gmqrk247 Thanks for answering my question😄.

  0
• 

  Laharl•1,000

  @UrbanskiDevPosted about 2 years ago

  Hello Atul kumar !

  Congratulation for finishing this project

  1. In your html file, I recommend you to modify your <div class="container"> by a <section>, a div tag has no meaning in html while section does have one !

  I give you a link about section tag, and html semantics in general to learn more about it :

  • W3Schools section tag
  • W3Schools semantic html

  2. In your css file, you can define variable to make it easier to maintain, like color definition :

  :root{
  --var-name:hsl(31, 77%, 52%);
  }
  
  .card1{
  background-color:var(--var-name);
  }
  

  I give a link to learn more about them :

  • MDN CSS Variable

  I hope it helps you, keep learning and happy coding !

  Marked as helpful

  0

  ---

  

  Atul kumar•200

  @AtulKumar0001Posted about 2 years ago

  @UrbanskiDev Hey Thanks for your suggestion. I get what you are trying to say, and I should replace my other div with a <section> semantic element or something else, but what should I replace my div with since my .container is not a section?

  0

  

  Laharl•1,000

  @UrbanskiDevPosted about 2 years ago

  @AtulKumar0001

  Let's make it together to see what I meant with my previous comment !

  <section class="container">
          <div class="wrap">
            <article class="card1 cards">
              <header>
                  <picture class="picture">
                    <img src="icon-sedans.svg" alt="" />
                  </picture>
              
                  <h1 class="heading">Sedans</h1>
              </header>
              
              <p class="para">
                Choose a sedan for its affordability and excellent fuel economy.
                Ideal for cruising in the city or on your next road trip.
              </p>
              <button class="btn btn-1">Learn More</button>
            </article>
  
            <article class="card2 cards">
              <header>
                  <picture class="picture">
                    <img src="icon-suvs.svg" alt="" />
                  </picture>
                  <h1 class="heading">SUVs</h1>
              </header>
              
              <p class="para">
                Take an SUV for its spacious interior, power, and versatility.
                Perfect for your next family vacation and off-road adventures.
              </p>
              <button class="btn btn-2">Learn More</button>
            </article>
  
            <article class="card3 cards">
              <header>
                  <picture class="picture">
                    <img src="icon-luxury.svg" alt="">
                  </picture>
                  <h1 class="heading">Luxury</h1>
              </header>
              <p class="para">
                Cruise in the best car brands without the bloated prices. Enjoy
                the enhanced comfort of a luxury rental and arrive in style.
              </p>
              <button class="btn btn-3">Learn More</button>
            </article>
          </div>
  </section>         
  

  What I did is one way to structure it, but there's multiple way to do it which can be good too.

  It allows you to structure your page in a better way, because as I was saying in my previous comment, a div has no meaning, while these tags provide more semantic information.

  One thing to keep in mind, using div is not a bad thing, but sometimes, there's a better tag to use, which has more meaning than using a div.

  Don't hesitate to ask if you have new questions !

  Marked as helpful

  0

  

  Atul kumar•200

  @AtulKumar0001Posted about 2 years ago

  Once again, thank you for your help @UrbanskiDev. I will try to avoid using divs. I don't have any questions right now, and I don't want to waste your time with meaningless doubts. 😅.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Atul kumar, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  Your solution seems fine, you did a really good job wrapping the content for these 3 cards. Something you can improve here is to use a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class. Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

  ✌️ I hope this helps you and happy coding!

  0