Responsive 3 Column Preview Card using Flexbox/SCSS and Mobile-First

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Caio, I took some time to look at your solution and you did a great job!

  Tip of graphic design: With font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading) ... for the designer it's a really awful font!

  • I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.

  Also the button have another font and in the hover state the text isen't visible

  Overall you did well :)

  Hope this help and happy coding!

  Marked as helpful

  0

  ---

  

  Caio de Alcantara Santos•250

  @caio-alcantaraPosted almost 3 years ago

  @denielden Thank you for the reply, Deniel. Just fixed the font problem and the button :)

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  @caio-alcantara You are welcome! I would really appreciate if you mark my comment as helpful if it helped you, thank you very much :)

  0
• 

  Herson•220

  @HersonmeiPosted almost 3 years ago

  Hi Caio!

  Test it out and see if it works.

  Add this color to your hover:

  .card a:hover {
    background-color: transparent;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    color: hsla(0, 0%, 100%, 0.75);
  }
  

  I think it's a question of specificity, it would be good to see that because I won't be able to explain it very well. But I managed to solve it by deleting all its id and transforming it into classes.

  In your HTML code it will look like this:

  <div class="card sedans" >
  ...
  </div>
  
  <div class="card suvs">
  ...
  </div>
  

  And in your CSS code it will look like this:

  .sedans {
     ...
  }
  .sedans a {
    ...
  }
  .suvs {
     ...
  }
  .suvs a {
     ...
  }
  .luxury {
  ...
  }
  .luxury a {
     ...
  }
  

  Only with these changes has it started to work here. I recommend trying to find out the more detailed explanation of this, but I believe it could be greater ID specificity.

  Good studies and keep sending new projects!

  1

  ---

  

  Caio de Alcantara Santos•250

  @caio-alcantaraPosted almost 3 years ago

  @Hersonmei Heey, Herson! Thank you a lot for these tips, they worked out fine. Unfortunately, we won't be able to see the changes I made here in the solution page, but you can visit the live page and see it for yourself

  1
• 

  optimusprime202•1,200

  @optimusprime202Posted almost 3 years ago

  Hey @caio-alcantara, Tremendous work!

  0
• 

  Mayur Mali•810

  @Mayurtm29Posted almost 3 years ago

  Hi Caio , First learn more button is not aligned properly

  0
• 

  Caio de Alcantara Santos•250

  @caio-alcantaraPosted almost 3 years ago

  Also, I just saw now that my card's width is waaay bigger than it should. I'm going to fix it, but I have no screenshots left for the month, so it'll stay like that here.

  Edit: Although the screenshot solution doesn't seem that good, check the live site, I swear it's better hahahaha

  0