Responsive Design 3-column-preview-card-component-main HTML & CSS

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Hello @itzjter ,

  I have some suggestions regarding your solution:

  • 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 .

  • you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).and use <h2 > instead of <h1 >this helps search engines better understand the primary subject matter of each page,

  
  .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;            
  }
  
  

  • 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.

  • Use footer for the attribution.

  • border-radius and overflow hidden to the main container(that wraps the three cards.

  • Never use px for font size

  • It's rarely ever a good practice to set height on the element Let the content dictate how tall something needs to be.remove height on the component , it is not needed and will only ever cause bugs. Let the height of the component be dictated automatically by the browser - it will be added up height of the cards contents, padding, and any vertical margins on that content.

  • an explicit width is not a good way . Remove the width from component and change it to max width instead for the card.

  Hopefully this feedback helps

  11

  Marked as helpful
• 

  Naveen Gumaste•10,420

  @NaveenGumaste

  Posted over 3 years ago

  Hay ! itzjter Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  11

  Marked as helpful
• Account deletedPosted over 3 years ago

  Hi there 👋

  Congratulate on finishing your project 🎉. You did a great job 🔨

  I give some suggestions that I hope help you take your project design to the next level 📈.

  • There is some issue when you hover over the button. To fix this change the code to this on line 136 in CSS transition: all 500ms ease-in-out;

  Happy coding ☕

  Maqsud

  11

  Marked as helpful