3-column-preview-card-component-main

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi Youcef Boudour,

  Excellent work! I see you have received some incredible feedback, I have some suggestions regarding your solution:

  • Page should have one level heading. You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

  • line-height: 1.5rem; Use a unitless line-height value to Avoid unexpected results. You can read more in mdn

  • There are so many arguments against changing the root font size, it state that you should never change the root font size because it harms accessibility.

  • It's recommended to include a git ignore. This came with your starter files. It's less important in this challenge but will become extremely important as you move onto larger projects with build steps.

  Last , the hover effects on the links is missing.

  Overall, Great job on this one. Hopefully this feedback helps.

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Youcef Boudour, congratulations for your new solution!

  Dont worry about the media query bro, with the time you'll learn it, every challenge will make learn more and more.

  To make your card responsive and with the media query the version mobile all you need to do is to change the flex-direction: column in this case is better you active it before 700px to have the desktop version layout broken

  See the code fixes below:

  @media screen and (min-width: 800px)
  .container {
      max-width: 60rem;
      margin-top: 5rem;
      display: flex;
      flex-direction: column;
  }
  

  If you’re not familiar to media queries and responsivity, here’s a good resource to learn it:

  https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Adriano•38,270

  @AdrianoEscarabotePosted over 2 years ago

  I have some tips for you that might cheer you up a bit!

  Don't be charging yourself too much, you will evolve a lot as a front-end developer if you dedicate yourself every day and of course always want to improve.

  I have some tips you can study to improve the responsiveness of any layout:

  1- Media queries They are very important to write code that will be activated only when the screen reaches the desired resolution. click here

  Add this media query in your code, try to interpret what is happening:

  `@media (max-width: 600px) { .container { display: flex; flex-direction: column; align-items: center; padding: 0 1rem; }

  .suvs, .luxury, .sedans { display: flex; flex-direction:column; align-items:center; justify-content:center; } }`

  You see it's not difficult, right? anyway. Hope it helps... Don't forget to mark it as helpful. 👍

  Marked as helpful

  0