3 Column Preview Card Component

Community feedback

• 

  NitheeshKumar C•440

  @NitheeshKumar-C

  Posted over 3 years ago

  Hi there 😀,

  You can fix it by removing justify-content: center from body element👍.

  Happy coding ☕.

  Nitheeshkumar

  10
• 

  Paridhi•60

  @paridhi3

  Posted over 3 years ago

  Thank you for the pointing out the slips I made! I am grateful for your detailed solution. Will continue to improve as I practice. :)

  00
• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Hello @paridhi3 ,

  I have some suggestions regarding your solution:

  • There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution).

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

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

  • you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). Than you can use <h2> instead <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;            
  }
  

  • You should use em and rem units .Both em and rem are flexible, scalable units, Using px won't allow the user to control the font size based on their needs.

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

  • For a responsive full page height, set the body element min-height to 100vh.

  
  body { min-height: 100vh; }
  
  

  • you almost never want to set height , let the content define the height.

  • Never use px for font-size.

  Hopefully this feedback helps .

  00