Responsive Testimonials Grid Section using Grid and Flexbox

Community feedback

• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hello Klaudia,

  Great job with the challenge and nicely using the css grid to make it successfully responsive. I like that you added a tablet layout with 2-columns, before switching to 1-column mobile layout. But there seems to be few issues. E.g. When switched to tablet layout on my notebook, to top part of the of the sections seem to be cut off resulting in data loss. This is because .forum { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

  I'd suggest removing this as position absolute is not necessary in this solution, apart from the quote svg. In general position absolute is better to be used for elements like decorative images etc. instead of positioning big elements/section on the page.

  Next you can remove these afterwards because this seem to cause issues for the mobile centering:

  @media (max-width: 950px) { body { max-width: 500px; padding: 20%; overflow-x: hidden; } .forum { max-width: 300px; max-height: 1000px; top: 550px; left: 50%; } } E.g. max-width to the body is something to be avoided in general. A body should never have a max-width like that as it can cut off some parts of the pages or content.

  Finally add some padding to the body so testimonials don't touch the edges of the screen:

  body { padding: 40px; }

  And add position:relative to the first comment so that the quote svg is positioned according to that container and not the whole document itself. #first-comment { position: relative; }

  Hope you find this feedback helpful!

  Marked as helpful

  0