Build simple responsive 3 columns card

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @bmhuyquoc104 ,

  I have some suggestions regarding your solution:

  • First of all, there isn't any gap in the mobile layout.(remove gap: 2em;).

  • you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). Then use <h2> instead of <h1>.

  .sr-only {
  	border: 0 !important;
  	clip: rect(1px, 1px, 1px, 1px) !important;
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important; 
  	height: 1px !important;
  	margin: -1px !important;
  	overflow: hidden !important;
  	padding: 0 !important;
  	position: absolute !important;
  	width: 1px !important;
  	white-space: nowrap !important;            
  }
  
  

  • For any decorative images, each img tag should have emptyalt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.

  • don't use divs for meaningful content. Clicking those "learn more" buttons would trigger navigation, so the right interactive element is <a>

          <a href="#" class="more" aria-label="" >Learn More</a>
  

  CSS

  • border-radius and overflow hidden to the container that wraps the three cards.so you don't have to set it to individual corners.

  • A hover effect that raises a button UP looks strange. It's not a natural movement to happen. you can border: 1px solid transparent ; to the <a> before the hover and on the hover it woud be border: 1px solid hsl(0, 0%, 95%);

  Your github repo is not accessible (not found).

  Last , I would suggest to read more about clamp function

  Overall , your solution is good . Hopefully this feedback helps

  Marked as helpful

  0

  ---

  

  Huy Vo•340

  @bmhuyquoc104Posted almost 3 years ago

  @PhoenixDev22 Thank you so much for your help ! I will follow your advices to make my it looks better!.

  1
• Account deleted

  Hello there! 👋

  Congratulations on finishing your challenge! 🎉

  I have some feedback on this solution:

  put the .card div inside <section> tag to be more setmantic

  i hope this is helpful

  Marked as helpful

  0