responsive 3-column-preview-card-component

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Looks cool, I would add some transitions for hover states so it looks smoother. Also, the container is changing its size on hover and looks buggy, might want to prevent the button from changing it's height when you hover over it.

  0
• 

  Adriano•38,270

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Marwa Adel, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Learn More, he is not confirming a form, or something like, it will be redirected to another page, to Learn More about!

  to solve this problem do this:

  <a href="/">Learn More</a>

  A document ought to have one primary landmark, and the absence of a main tag around the page's primary content is the root of this issue. On this page, there is no other element that is more important than the one that this challenge is based on, so to solve it, wrap all the content in the'main' tag.

  It's always a good idea to pay close attention to the proper use of semantic html elements because they are crucial for screen reader users to understand what the main content of the page is in the case of the'main' tag!

  The remainder is excellent.

  I hope it's useful. 👍

  0
• 

  Joanna Skrzypczak•530

  @joaskrPosted almost 2 years ago

  Hi, Congrats on completing the challenge!

  Here are some minor issues that you can fix:

  • Change <div class="parent"> to <main>. Using HTML landmark elements is better for accessibility so you should use elements such as <main> <nav> <header> <footer>.
  • The layout is broken on mobile devices smaller than 375px (width) - for example on Galaxy S8/S9. It is probably related to the media query screen and (min-width: 375px) and (max-width: 600px) as it applies the style only to widths between 375-600. Everything lower and higher than these values won't be affected by the styling.

  Let me know if you have any questions :)

  Keep coding and good luck with future challenges

  0