3 card layout , responsive with 1 line.

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, great work on this one. Layout looks good in desktop, it is responsive and the mobile layout is good as well.

  Regarding your query:

  • Oh yes, a much simpler way. Instead of the padding and all of those. What you could just do is that. In the .btn selector, you should just add border: 2px solid transparent. This way the button already have the border. Then on the :hover state, you could just do:

  .btn:hover {
    border-color: apply the color needed
  }
  

  You only need that :>>

  Some suggestions as well would be:

  • On the main tag, the overflow: hidden; is not really being used, you could remove that.
  • On the body tag, to center the content, you should add min-height: 100vh on the body. Do not mistook this with height: 100vh okay, the latter is not advisable to use, use min-height: 100vh.
  • Avoid multiple h1 element on a webpage. Use only at least 1 h1. So change those car title into h2. Also just reminded, when using heading tags, do not skip a level. If you have h3 makes sure that h1, h2 are present.
  • Since you are changing h1 and h1 is needed in a webpage. On this one, the h1 would be a screen-reader only text. You could search for sr-only. That is just a css styling intended for screen reader. But if you are starting out, I wouldn't mind about it, but it is good that you are informed about it.
  • Those button should have been using a tags. Since the container itself is not really a form, button elements on this is not good.

  Aside from those, great work.

  01

  Marked as helpful