Responsive 3-component-card

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @SilverWings47 ,

  I have some suggestions regarding your solution:

  • 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 empty alt="" (as you did )and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in this challenge, all the images are all decorative.

  • swap the buttons for anchor tags. Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right. And for future, it is essential if you include a button in a form element without specifying it's just a regular button, it defaults to a submit button., though, so it's a good idea to make a habit of specifying the type.

  CSS

  • I recommend to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs. Have a look at media query again , as 300px too small

  Overall , your solution is good . Hopefully this feedback helps

  0