Using Grid for Responsive

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @med-ghaza,

  Great work ! 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.

  • You should use em and rem units .Both em and rem are flexible, scalable units. using px isn't compatible with users who adjust their base font size in their browser.read more about it .

  • Use max-width for the .container , let it grow to a point.

  Hopefully this feedback helps

  Marked as helpful

  1
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  Used this Code in Different Car Card:- width: Your choice ; height : Your choice;

  and Again Used transform property in main tag. to change the whole container size. Used For center in Body tag:-

  display : flex; justify-content:- center; align-item: center; margin: 5px auto;

  Marked as helpful

  0