Responsive Testimonials grid using only 1 grid container

Community feedback

• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  You will find that you have to adjust break-points to the layout you are working on. You may only use one or you may need more than one. You may have to use a break-point just to fix one small section of a site.

  Wrap your container div in a Main tag and change the attribution div to a footer and it will clear most of the accessibility warnings. There is no H1 on the page, but there doesn't seem to be a logical place to use one.

  Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

  Hope this helps.

  1
• 

  Alex•660

  @al3xbackPosted almost 3 years ago

  Hi Brivan,

  I think it is better to set grid-template-columns by using fraction unit (1fr). currently the grid items dont fully cover the grid container, leaving minus 1% on the right side.

  0

  ---

  

  Mohamed Abdessamed•140

  @Brivan-26Posted almost 3 years ago

  @al3xback That 1% came from grid-gap:1%; I set grid-template-columns: repeat(4, 24%), so, the remaining 4% will be filled using grid-gap:1%. But ya, I think using fraction unit, and the gap using small pixels will be better. Thanks for your mark

  0

  

  Alex•660

  @al3xbackPosted almost 3 years ago

  @Brivan-26 no, it's not true, grid-gap will only fill up 3%. attached screenshot to see that grid-gap area marked by purple color. https://prnt.sc/233sjdo

  0

  

  Mohamed Abdessamed•140

  @Brivan-26Posted almost 3 years ago

  @al3xback Oh ya! I see it now, I thought that grid-gap works the same as justify-content:space-around in flexbox, but it is not. Thank you for this wonderful note@al3xback

  1
• 

  Favour Christopher•90

  @phaevourkhrisPosted almost 3 years ago

  Hi @Brivan-26 you did a great job. And yea, I think you can use breakpoint under 750px, it all depends on what you want to do at those breakpoints.

  Also, see if you can fix the accessibility issues indicated in the report.

  Goodluck

  0