Using Grid

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello GrischK ,

  I have some suggestions regarding your solution :

  • For any decorative images, each img tag should have empty alt="" 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>.

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

  • To make the component perfectly in the middle of the page, you can make the body element as a flexbox container.(no need for position )

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

  • Using percentages % for width can cause issuses , consider using max-width to the container that wraps the three card. That will let the component grow up to a point and be limited.

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

  • Add hover effect on the links "learn more".

  • Never use px for font-size.

  Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  GrischK•140

  @GrischKPosted over 2 years ago

  @PhoenixDev22 Hi, thanks for taking time to check my code. That'as helpful ! I will check it out tomorrow to improve it. ;)

  1
• 

  GrischK•140

  @GrischKPosted over 2 years ago

  I don't understand why on responsive version my HTML and Body elements are not taking all the page... If you have any advise or solution I would thank you guys ;)

  0